我想改变img的不透明度,并添加一个50x50的缩略图缩放悬停只使用CSS没有jquery。这是我到目前为止所做的。
HTML代码:
<div class="span4">
<a class="zoom-icon" href="#">
<img class="blackout image-1" alt="Elite Sports" src="http://www.domain.com/images/es.jpg" width="300" height="300">
</a>
</div>
CSS代码:.span4 { margin: 35px 50px; border: 5px solid #000; }
.span4:hover { border: 5px solid #ccc; }
.span4 a:hover { background: #000; }
.blackout:hover { opacity: .0; }
我有黑色背景悬停工作,但我不知道如何使缩略图显示在黑色背景"blackout"的顶部。如有任何有用的建议,我将不胜感激。
更新w/小提琴:
http://jsfiddle.net/8BMYH/像这样
http://jsfiddle.net/8BMYH/14/HTML <div class="span4"> <a class="portfolio-link-icon" href="http://www.elitesports.com"><
<img class="alignnone blackout size-full wp-image-2592" alt="Elite Sports" src="http://www.surgicalgeeks.com/wp-content/uploads/2013/04/es.jpg" width="300" height="300" />
<img class="zoom-link" src="http://www.surgicalgeeks.com/wp-content/uploads/2013/04/portfolio-link-icon.png" />
</a>
</div>
CSS span4 {
background: #000;
margin: 35px 50px;
width: 300px !important;
height: 300px;
border: 5px solid black;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
box-shadow: 1px 1px 5px #000;
}
.span4:hover {
overflow: hidden;
border: 5px solid #8b8c8d;
border-radius: 25%;
-webkit-transform: rotate(290deg);
-moz-transform: rotate(290deg);
-o-transform: rotate(290deg);
-ms-transform: rotate(290deg);
transform: rotate(290deg);
}
.blackout:hover {
opacity: .0;
}
.zoom-link {
top: 130px;
left: 130px;
position: absolute;
visibility: hidden;
}
.span4:hover .zoom-link {
position: absolute;
visibility: visible;
}
.span4:hover .blackout {
opacity: 0;
}
当您将鼠标悬停在使用:after
伪元素的链接上时可以添加缩略图。我创建了一个Pen来演示:http://codepen.io/Ghodmode/pen/xFmqf
这不是一个理想的解决方案,但它完全是CSS。如果我能从图像中获得src属性的值,并使用attr()
(http://www.w3.org/TR/css3-values/#attr) CSS函数将其用作背景url,那就更好了,但我无法使其工作。
.span4 a.zoom-icon {
position: relative;
}
.span4 a.zoom-icon:hover:after {
content: "";
display: block;
position: absolute;
width: 50px;
height: 50px;
bottom: 10px;
right: 10px;
background-color: black;
background-image: url("http://bit.ly/XioiVs");
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}