Chcę utworzyć efekt na Hover pokazany poniżej pierwszych dwóch obrazów

enter image description here

enter image description here

W poniższym dwoma obrazami pokazuje, jak wdrożono za pomocą przykładowego przykładu na ten sposób Link

enter image description here

enter image description here

Jak widać podczas unoszenia się na jednym zdjęciu 3RD Pozycja obrazu jest zmieniana,

Jak wykonać ustalenie dwóch obrazów podczas unoszącego się na jednym obrazie? Jak pokazano na powyższym pierwszym dwumieniu

Oto mój jsfiddle Kod

Css

.wrap{
    width:1360px;
    margin:0px;
    padding:0px;

}
.con{
    display:inline-block;
    width:453px;
    height:453px;
    position:relative;
    background:url(images/new-psd_22.jpg) no-repeat;
    opacity:0.5;
    transition:0.5s;
    transition-timing-function: linear;
    margin:0px;
    box-sizing:border-box;
    border-left:#FFF 1px solid;


}
.hover{
    text-align:center;
    color:#fff;
    display:inline-block;
   width:453px;
    height:453px;
    position:absolute;
    z-index:2;
    background-color:rgba(0,0,0,0.5);
    transition:0.5s;
    margin:0px;
    box-sizing:border-box;
     display:inline-block;
}
.con:hover{

      text-align:center;
    color:#fff;
    opacity:10;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
    height:400px;
    width:570px;
    margin:0px;
}
.con:hover span{

      text-align:center;
    color:#fff;
    opacity:0;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
    height:400px;
    width:570px;
    margin:0px;
}

Ciało

<ul class="wrap">
<li class="con" style=" float:left;" >
    <span class="hover"  >Hover Me</span>
</li>
    <li class="con"  style=" float:left;" >
    <span class="hover" >Hover Me</span>
</li>

 <li class="con" style=" float:left;" >
    <span class="hover" >Hover Me</span>
</li>

<ul>
2
user26697 12 sierpień 2014, 11:23

3 odpowiedzi

Najlepsza odpowiedź

Jeśli Starsza obsługa przeglądarki nie jest problemem, możesz użyć CSS3 Flex Box.

*{
  margin:0;
  padding:0;
}
  html,body{
  height:100%;
}
.wrap{
  display:flex;
  width:100%;
  height:100%;
  text-align:center;
  list-style-type:none;
  white-space:nowrap;
  overflow:hidden;
}
.con{
  position:relative;
  box-sizing:border-box;
  flex:1 .5;
  background:url(images/new-psd_22.jpg) no-repeat;
  opacity:0.5;
  margin:0px;
  border-left:#FFF 1px solid;
  transition: all 0.5s linear;
}
.hover{
  display:inline-block;
  box-sizing:border-box;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  text-align:center;
  color:#fff;
  background-color:rgba(0,0,0,0.5);
  transition:0.5s;
}
.con:hover{
  flex-grow:1.5;
  text-align:center;
  color:#fff;
  opacity:10;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
  margin:0px;
}
.con:hover span{
  text-align:center;
  color:#fff;
  opacity:0;
  background:url(images/Indian_Air_Forc17992.jpg) no-repeat;
  margin:0px;
}

Próbny

0
T J 12 sierpień 2014, 08:39

Zaktualizuj swoją klasę .wrap jak poniżej. Usuń również niechciane float:left w stylu.

.wrap{
width:100%;
margin:0px;
padding:0px;
white-space:nowrap;
}

PRÓBNY

0
Suresh Ponnukalai 12 sierpień 2014, 07:28

Wystarczy dać ul więcej szerokości (dodałem dodatkowe 1000px). Możesz dodać opakowanie z overflow: hidden;. Oto jsfiddle.

0
Justinas 12 sierpień 2014, 07:29