我正在使用实现以下目标的图像效果代码:
1) 结合background-blend-mode: multiply
和filter: saturation 0%
2) 将鼠标悬停在图片上时,图片会恢复为原始调色板。
我希望你们能帮助我实现以下目标:
1) 当高度设置为自动
时,如何确定图像的宽度百分比?示例:宽度:50%;高度:自动
2) 我如何简化此代码 使其不那么笨拙?我觉得这段代码可以更有效地构建......
3) 如何让图片的宽度对应于.page
wrapper?
这是一个jsfiddle用于视觉/功能引用。
这是我需要帮助实现的目标的可视化
(左:当前,右:目标)
代码如下:
HTML:
<div class="page">
<div class="image-wrap-01">
<div class="image01">
<svg>
<defs>
<filter id="colorize_brown" color-interpolation-filters="sRGB">
<feFlood flood-color="#8E4204" result="A" />
<feColorMatrix type="saturate" in="SourceGraphic" values="0" result="B" />
<feBlend mode="multiply" in2="B" in="A" />
</filter>
</defs>
<image class="brown" filter="url(#colorize_brown)" x="0" y="0" width="100%" height="100%" xlink:href="http://i59.tinypic.com/1zvwwv9.jpg" />
</svg>
</div>
<p class="caption01">Image 001</p>
</div> <!-- END | image-wrap-01 -->
<div class="image-wrap-02">
<div class="image02">
<svg>
<defs>
<filter id="colorize_brown" color-interpolation-filters="sRGB">
<feFlood flood-color="#8E4204" result="A" />
<feColorMatrix type="saturate" in="SourceGraphic" values="0" result="B" />
<feBlend mode="multiply" in2="B" in="A" />
</filter>
</defs>
<image class="brown" filter="url(#colorize_brown)" x="0" y="0" width="100%" height="100%" xlink:href="http://i60.tinypic.com/nwzvpx.jpg" />
</svg>
</div>
<p class="caption02">Image 002</p>
</div> <!-- END | image-wrap-02 -->
</div> <!-- END | .page -->
CSS:
/* PAGE WRAP */
.page {
width: 50%;
height: 50%;
background-color: #ffecae;
}
/* IMAGE 01 */
.image-wrap-01 {
width: 100%;
height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
.image01, .image01 svg {
width: 600px;
height: 400px;
}
.image01 {
background: url("http://i59.tinypic.com/1zvwwv9.jpg");
background-size: 600px 400px;
position: relative;
}
/* IMAGE 02 */
.image-wrap-02 {
width: 100%;
height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
.image02, .image02 svg {
width: 400px;
height: 600px;
}
.image02 {
background: url("http://i60.tinypic.com/nwzvpx.jpg");
background-size: 400px 600px;
position: relative;
}
/* UNIVERSAL COMMAND */
.image01 svg, .image02 svg {
left: 0;
overflow: hidden;
position: absolute;
top: 0;
}
/* HOVEROVER */
.brown {
opacity: 1;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}
.brown:hover {
opacity: 0;
}
/* IMAGE CAPTIONS */
.caption01 {
text-align: left;
font: 13px/17px helvetica;
color: black;
width: 600px;
}
.caption02 {
text-align: right;
font: 13px/17px helvetica;
color: black;
width: 400px;
}
最佳答案
我相信这可以回答您的问题:
图像现在是列的整个宽度。您唯一需要手动编码的是图像的纵横比为 padding-top:150%;
,这与将 youtube/vimeo 视频嵌入网站的响应式解决方案相同。
http://jsfiddle.net/ryanpither/6x0apqod/
如果我对您的问题的理解有误,请告诉我。
关于javascript - 悬停图像功能 : how can I set its dimension by percentage and how to simplify this code?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27097680/