图像悬停效果问题 [英] Image hover effect issue

问题描述

我尝试   执行   效果      I   pass  < span class =code-leadattribute>   mouse   over   on   a   picture   I  想要 到  show  < span class =code-leadattribute> a   black   box    出现 关闭 和 我 想要   仅  a   square       middle  保持 其中 我 希望   地点   图标    a  搜索 图标。 
 
 但是我   a  问题 因为 我 想要 我的 图片  宽度：155px; 和身高：140px; 
 
      this   width  和  height  I' m 不    sucess   with     effect ，我 已经 尝试 很多  alternative  但   不 工作。 
 
 可以 你 给 我 您的帮助？ 
 
 
 此 工作 罚款： 
 
  http：  //   jsfiddle.net/ritz/cQL4S /  
 
 但是 我 想要    less   image ，和 工作 < span class =code-leadattribute> bad： 
 
  http：  / /   jsfiddle.net/ritz/cQL4S/1  

解决方案

< blockquote>我想在本节中：

。第二效应：悬停。掩码 {
  opacity  ：  1;  
  border  ：  45px solid rgba（0,0,0,0.7）;  
} 

您必须调整边框设置以适应新视图大小调整...我将其更改为45只是为了看看发生了什么..

I’m trying to do an effect that when I pass the mouse over on a picture I want to show a black box that appears closing and I want that only a square in the middle stays where I want to place an icon of a search icon.

But I´m having a problem because I wanted my picture have width:155px; and height:140px;

And with this width and height I´m not having sucess with the effect, I already try many alternatives but its not working.

Can you give me your help?


This works fine:

http://jsfiddle.net/ritz/cQL4S/

But I want with smaller image, and works bad:

http://jsfiddle.net/ritz/cQL4S/1

解决方案

I think in this section:

.second-effect:hover .mask {
   opacity: 1;
   border:45px solid rgba(0,0,0,0.7);
}

You will have to adjust the border setting to accomodate the new view sizing...I changed it to 45 just to see what happened..

这篇关于图像悬停效果问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！