내 html 파일에 다음 CSS 코드를 사용합니다. 호버에 나타나는 이미지가 왼쪽 상단에 표시됩니다. 어떻게 중앙에 배치 할 수 있습니까?
다음은 html 코드입니다.
<a class="thumbnail" href="#thumb">View Sample
<span>
<img src="images/1.png" /><br>Simply beautiful.
</span>
</a>
다음은 CSS 코드입니다.
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #F0F0F0 ;
border-radius: 20px;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 10;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
내 jsfiddle을 여기에서보세요 : http://jsfiddle.net/93863/7/
내가 추가 한 CSS :-
.thumbnail:hover span
{
display: block;
position: fixed;
top: 50%;
left: 50%;
margin-top: -194px; /* Half of the popups height */
margin-left: -190px; /* Half of the popups width */
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다