CSS 이미지 갤러리

이미지가 확대되는 부분에서 갤러리의 첫 번째 이미지를 자동으로 거기에 표시하고 싶지만 빈 상자를 표시하는 순간에도 내 이미지 갤러리는 롤오버 할 때 잘 작동합니다. 이미지 위로 마우스를 가져갈 때까지CSS 이미지 갤러리

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="css.css"/> 
<title>Welcome!</title> 

</head> 
<div id="wrapper"> 
<body> 
<div id="header"> 
<div id ="logo"> 
<embed src="Media/Images/logo.svg" type="image/svg+xml" /> 
</div> 

<div id="icons"> 
    <img src="Media/Images/EnvelopeIcon.png" alt="Envelope Icon" height="25" width="30"> 
    <p>[email protected]</p> 
    <div class="clear">  
    </div> 
    <img src="Media/Images/PhoneIcon.png" alt="Envelope Icon" height="25" width="30" /> 
    <p> 07904921417</p> 
    <div class="clear">  
    </div> 
    <img src="Media/Images/HouseIcon.png" alt="Envelope Icon" height="25" width="30"> 
     <p>Stafford, UK</p> 
    <div class="clear">  
    </div>    
<div class="clear">  
</div> 
</div> 
</div> 

<nav> 
<div id ="NavBar"> 
    <div id="Nav1"> 
    <div id="Triangle1"></div> 
    <a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Index.html"><h2>About Me</h2></a> 
    </div> 
    <div id="Nav2"> 
    <div id="Triangle2"></div> 
    <a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Education.html"><h2>Education</h2></a> 
    </div> 
    <div id="Nav3"> 
    <div id="Triangle3"></div> 
    <a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Portfolio.html"><h2>Portfolio</h2></a> 
    </div> 
    <div id="Nav4"> 
    <div id="Triangle4"></div> 
    <a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Interests.html"><h2>Interests</h2></a> 
    </div> 
    <div id="Nav5"> 
    <div id="Triangle5"></div> 
    <a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Contact.html"><h2>Contact Me</h2></a> 
    </div> 
</div> 
</nav> 
<article> 
<section id = "content"> 
<h1>Portfolio Work</h1> 
<div class="gallerycontainer"> 
<a class="thumbnail"><img src="Media/Images/Tardis.bmp" width="225px" height="125px" border="0" /><span><img src="Media/Images/Tardis.bmp" width="750px" height="450px"/><br />3DS Tardis Model.</span></a> 
<br /> 
<a class="thumbnail"><img src="Media/Images/Main Station.png" width="225px" height="125px" border="0" /><span><img src="Media/Images/Main Station.png" width="750px" height="450px" /><br /></span></a> 

<br /> 

<a class="thumbnail"><img src="Media/Images/Claymation1.JPG" width="225px" height="125px" border="0" /><span><img src="Media/Images/Claymation1.JPG" width="750px" height="450px"/><br />Sushi for dinner anyone?</span></a> 
<br/> 

<a class="thumbnail"><img src="Media/Images/DSC_0245.jpg" width="175px" height="125px" border="0" /><span><img src="Media/Images/DSC_0245.jpg" width="500px" height="450px"/><br />Run wild with horses.</span></a> 

<br /> 

<a class="thumbnail"><img src="Media/Images/DSC_0043 (3).JPG" width="225px" text-align="center" height="125px" border="0" /><span><img src="Media/Images/DSC_0043 (3).JPG" width="750px" height="450px"/><br />Run wild with horses.</span></a> 

</div> 
</section> 
</section> 
</article> 
</div> 
<footer> 
</footer> 
</body> 
</html> 


.gallerycontainer{ 
position: relative; 
height: 250px; 
/*Add a height attribute and set to largest image's height to prevent overlaying*/ 
} 

.thumbnail img{ 
border: 1px solid white; 
margin: 0 5px 5px 0; 
} 

.thumbnail:hover{ 
background-color: transparent; 
} 

.thumbnail span{ /*CSS for enlarged image*/ 
position: absolute; 
background-color: lightyellow; 
padding: 5px; 
left: -1000px; 
visibility: hidden; 
color: black; 
text-decoration: none; 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
padding: 2px; 
} 

.thumbnail:hover span{ /*CSS for enlarged image*/ 
background-color: #333; 
visibility: visible; 
top: 0; 
left: 250px; /*position where enlarged image should offset horizontally */ 
z-index: 50; 
}

출처

2012-12-10 WibblyWobbly

나는 첫 번째 이미지를 숨길 수 있지만 다른 이미지 위에 떠 있도록에게 낮은 Z 색인을주지 못할 것이다. 이미지가 동일한 크기 인 경우에만 작동합니다.

HTML

<div class="gallerycontainer"> 
    <a class="thumbnail"><img src="Media/Images/Tardis.bmp" width="225px" height="125px" border="0" /><span class="first"><img src="Media/Images/Tardis.bmp" width="750px" height="450px"/><br />3DS Tardis Model.</span></a> 
<br /> 
<a class="thumbnail"><img src="Media/Images/Main Station.png" width="225px" height="125px" border="0" /><span><img src="Media/Images/Main Station.png" width="750px" height="450px" /><br /></span></a> 

<br />

당신은 2 중요한 일을 놓친 당신의 바이올린의 코드에서 CSS

.thumbnail:hover span, .thumbnail span.first{ /*CSS for enlarged image*/ 
background-color: #FFF; 
visibility: visible; 
top: 0; 
left: 250px; /*position where enlarged image should offset horizontally */ 
z-index: 50; 
} 

.thumbnail span.first 
{ 
    z-index: 10 !important; /*Lower z-index for first one so others appear above it */ 
}

UPDATE

하면이 구현 :

여기에있는 두 개의 선택기 (내 CSS 코드 단편의 첫 번째 줄)는 .thumbnail:hover span, .thumbnail span.first입니다. 원래 선택자 만 있습니다. - 이것은 "첫 번째"span에 "hovered"span과 같은 스타일을 적용합니다.
앞에 "." .thumbnail span.first에 대한 코드에서 "첫 번째"스팬의 Z- 인덱스를 조정하므로 다른 스패이스가 위에 표시됩니다.

업데이트 2

스팬은 첫 번째 이미지의 텍스트를 마스크에 배경 색상을 필요로한다. 또한 이미지에 투명도가있는 경우 배경색없이 첫 번째 이미지가 표시됩니다. 업데이트 바이올린이 이것을 보여줍니다.

Example Fiddle

출처

2012-12-10 01:02:25

나는에서 CSS와 <스팬 클래스 = "첫째">에 대한 라인하지만 난 여전히 공간 – WibblyWobbly

에 표시 할 첫 번째 이미지를 얻을 수 (jsfiddle하는 코드를 추가 할 수 있음을 추가했습니다 http://jsfiddle.net/) 저장하고 여기에 URL을 게시하면 더 살펴볼 것입니다. –

http://jsfiddle.net/t5TmN/ – WibblyWobbly

CSS 이미지 갤러리

답변

관련 문제