0

我想更改 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; }

我有悬停工作的黑色背景，但我不知道如何使缩略图显示在黑色背景“停电”的顶部。任何有用的提示将不胜感激。

更新带小提琴：

http://jsfiddle.net/8BMYH/

4

2 回答 2

1

像这样的东西

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;
}
于 2013-04-05T20:00:26.123 回答
0

:after当您使用伪元素将鼠标悬停在链接上时，您可以添加缩略图。我创建了一支笔来演示这一点：http ://codepen.io/Ghodmode/pen/xFmqf

这不是一个理想的解决方案，但它完全是 CSS。如果我可以从图像中获取 src 属性的值并使用attr()（http://www.w3.org/TR/css3-values/#attr）CSS函数将其用作背景网址会更好，但是我无法让它发挥作用。

.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;
}
于 2013-04-05T21:26:45.610 回答