한 행에 세 개의 이미지가 있습니다. 이미지에는 텍스트가 없습니다. 코드를 추가해야합니다. 나는 여기에 설명 된 방법을 사용하여 (상대적 위치와 절대 위치를 사용하여) 다소 효과가있다. 다음은 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>