이미지에 텍스트가 중복되어 작동하지 않습니다.

Question

한 행에 세 개의 이미지가 있습니다. 이미지에는 텍스트가 없습니다. 코드를 추가해야합니다. 나는 여기에 설명 된 방법을 사용하여 (상대적 위치와 절대 위치를 사용하여) 다소 효과가있다. 다음은 jsfiddle입니다. 두 가지 주요 문제가 있습니다.

먼저 게재 위치가 일관되지 않습니다. 창 크기를 조정하면 텍스트가 이미지와 함께 움직이지 않습니다. 스마트 폰에서는 텍스트가 완전히 사라집니다.

둘째, 이미지가 마우스로 움직이면 확장됩니다. 그러나 마우스가 텍스트 위로 이동하면 확장이 중지됩니다. Z- 색인을 제거하면 이미지가 마우스를 놓으면 텍스트가 사라집니다. 텍스트를 항상 보여주고 싶지만 이미지를 확장하고 싶습니다. 내 코드는 아래와 같습니다. 내가 추가 한 텍스트 오버레이를 제외하고는 예제 here에서 가져온 것입니다. 변경된 이미지에 텍스트를 추가하여 설명 된대로 작동시킬 수 있습니까?

<style> 
    .nav {margin:0; padding-top:5px;overflow:hidden} 
    .nav-items {border:1px solid black} 
    .nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;} 
    .nav-items:hover img { 
     box-shadow: 0px 0px 150px #000000; 
     z-index: 2; 
     -webkit-transition: all 500ms ease-in; 
     -webkit-transform: scale(2.1); 
     -ms-transition: all 500ms ease-in; 
     -ms-transform: scale(2.1); 
     -moz-transition: all 500ms ease-in; 
     -moz-transform: scale(2.1); 
     transition: all 500ms ease-in; 
     transform: scale(2.1); 
    } 
    .nav-items img { 
    -webkit-transition: all 200ms ease-in; 
     -webkit-transform: scale(1); 
     -ms-transition: all 200ms ease-in; 
     -ms-transform: scale(1); 
     -moz-transition: all 200ms ease-in; 
     -moz-transform: scale(1); 
     transition: all 200ms ease-in; 
     transform: scale(1); 
    } 
    #bannerText_0, 
    #bannerText_1, 
    #bannerText_2{ 
    position:absolute; 
    font-size:20px; 
    line-height: 150%; 
    color:#fff; 
    top:60px; 
    background:transparent; 
    z-index:999; 
    } 
    #bannerText_0{left:10%;} 
    #bannerText_1{left:35%;} 
    #bannerText_2{left:60%;} 
    </style> 

    <div class="banner_set"> 
    <ul class="nav"> 
     <li id="0" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li> 
     <div id="bannerText_0">Img 1</div> 
     <li id="1" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li> 
     <div id="bannerText_1">Img 2</div> 
     <li id="2" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li> 
     <div id="bannerText_2">Img 3</div> 
    </ul> 
    </div> 

Answer 1

가장 큰 문제는 잘못하여 HTML을 구성한다는 것입니다 - 당신은 <ul>에서 <li> 요소 사이에 <div>의를 넣을 수 없습니다.

깨진 레이아웃을 유발할뿐만 아니라 텍스트 위에 마우스를 올리면 이미지가 영향을 미치기 때문에 실제로는 텍스트가 호버 효과가있는 nav-item 요소 안에 있지 않습니다.

div의 내용을 <li> 요소 안에 넣으면 모든 문제를 해결할 수 있습니다!

보너스 수정 :, 이미지 하단의 공간도 고정했습니다. 단지 이미지를 display:block;으로 만드십시오.

이러한 변경 사항으로 업데이트 귀하의 바이올린,

: https://jsfiddle.net/pcpg7zww/2/

작업 니펫을 :

.nav {margin:0; padding-top:5px;overflow:hidden} 
 
.nav-items {border:1px solid black} 
 
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;} 
 

 
.nav-items:hover img { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 500ms ease-in; 
 
    -webkit-transform: scale(2.1); 
 
    -ms-transition: all 500ms ease-in; 
 
    -ms-transform: scale(2.1); 
 
    -moz-transition: all 500ms ease-in; 
 
    -moz-transform: scale(2.1); 
 
    transition: all 500ms ease-in; 
 
    transform: scale(2.1); 
 
} 
 
.nav-items img { 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
    display:block; /* this will remove the space at the bottom */ 
 
} 
 
#bannerText_0, 
 
#bannerText_1, 
 
#bannerText_2{ 
 
position:absolute; 
 
font-size:20px; 
 
line-height: 150%; 
 
color:#fff; 
 
top:60px; 
 
background:transparent; 
 
z-index:999; 
 
} 
 
#bannerText_0{left:10%;} 
 
#bannerText_1{left:35%;} 
 
#bannerText_2{left:60%;}

<div class="banner_set"> 
 
    <ul class="nav"> 
 
    <li id="0" class="nav-items"> 
 
     <a href="example.com"> 
 
     <img src="http://placehold.it/130x130"> 
 
     <div id="bannerText_0">Img 1</div> 
 
     </a> 
 
    </li> 
 
    <li id="1" class="nav-items"> 
 
     <a href="example.com"> 
 
     <img src="http://placehold.it/130x130"> 
 
     <div id="bannerText_1">Img 2</div> 
 
     </a> 
 
    </li> 
 

 
    <li id="2" class="nav-items"> 
 
     <a href="example.com"> 
 
     <img src="http://placehold.it/130x130"> 
 
     <div id="bannerText_2">Img 3</div> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>