logo标签列表

CSS鼠标悬停图片颜色叠加效果

javascriptjqueryhtmlcss
3
我尝试过其他答案，但没有一个适用于我的特殊设置。我不能使用任何ul/li设置，请不要建议这样做。我试图让一个略带透明的橙色图层显示在一张图片上方。我不能使用绝对定位，在此网站上使用Foundation 4构建响应式设计。
到目前为止，我得到的是一张图片下面的背景颜色，而不是覆盖在上面。最初我也想用CSS实现图片中的绿色条纹，但也做不到。我也无法将其作为div的背景图像来完成，因为需要设置高度/宽度以像素为单位，这会打破响应式的设计。
以下是我想要实现的效果的图片：
接下来是HTML代码：
<div>
 <div class="work-button">
   <img class="work-hover" src="http://oi41.tinypic.com/118m6fn.jpg" alt="" />
   <div class="work-sub">Web Design</div></div>
</div>

CSS

.work-button {
text-align: center;
margin: 7%;
}
.work-hover:hover {
 background: rgba(229, 115, 37, 0.7);
 transition: all 0.2s ease-in-out;
 transform: scale(0);
 border-radius: 20%;
 }
 .work-sub {
 text-align: center;
 font-family: "Candal", Verdana, sans-serif;
 font-size: 1.5em;
 color: #fff;
 margin-top: -15%;
 }

关于答案的说明

所选的答案确实存在缺陷。当您调整页面大小时，遮罩层不会随之调整大小。相反，它将保持在初始化页面时的大小。当您再次刷新页面时，它会自动调整大小。这对用户来说不是问题，但对其他开发人员/雇主来说可能是一个问题。无论如何，再次感谢Brandon Davis！

** 更新 **

所以看起来我调用了两次onresize函数，因此它只服从第二个函数试图执行的操作。

 window.onresize = function () {
    resizeWorkOverlays();
    resizeSmallOverlays();
 }

如果您尝试使用此功能两次，这是我让它正常工作的方法。但是我似乎无法成功地第三次重复它。希望这可以帮到您！最终更新：2014年8月7日：在此处查看新的结果功能。 我已经完全切换到了CSS解决方案来悬停！我很快会在这里发布生成的代码。
请使用jsfiddle向我们展示一个例子。 - Chris Herbert
Fiddle - Almost A Developer
5个回答
2
这是我想到的内容：
（更新3）
CSS
.work-button {
  display: inline-block;
  background: none;
  transition: all 0.4s ease-in-out;
  padding: 0;
}

.work-hover {
    float: right;
    border: 6px solid rgba(255, 255, 255, 1.0);
    box-shadow: 0px 1px 3px black;
    border-radius: 20%;
}

.work-sub:hover, .work-hover:hover > .work-sub {
  background: rgba(229, 115, 37, 0.7);
  border-radius: 20%;
  /* box-shadow: 0px 1px 3px black; */
  opacity: 1.0;
}

.work-sub {
  text-align: center;
  font-family: "Candal", Verdana, sans-serif;
  font-size: 1.5em;
  color: #fff;
  float: left;
  position: absolute;
  opacity: 0.0;
  transition: all 0.4s ease-in-out;
  border: 6px solid #ffffff;
}

HTML

<div>
 <div class="work-button">
   <img class="work-hover" src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" alt="" />
   <div class="work-sub">Web Design</div>
  </div>
</div>

JavaScript

我最终使用JavaScript来创建div的初始高度和宽度。根据图像的高度，使其仍然具有响应性。这可能不是最优雅的方法，但它有效。

function resizeWorkOverlays() {
    // Edit These to reflect your proper class names
    var workButtonClass = 'work-button';
    var workButtonImage = 'work-hover';
    var workButtonSub = 'work-sub';
    ////////////////////////////////////////////////
    ///
    /// For Overlapping Border Put the Number of
    /// pixels that the border is the width of
    /// the border on the object. If unsure put '0'
    ///
    /////////////////////////////////////////////////

    var borderWidth = 0; // Width of the border 

    var workButtons = document.getElementsByClassName(workButtonClass); // Gets All Elements with the class defined in 'workButtonClass' varible

    var fullBorderWidth = borderWidth * 2; // Accounts for border-top and border-bottom and left and right

    for (var i = 0; i < workButtons.length; i++) {

        var workButton = workButtons[i]; // Work with a single work button
        var workImage = workButton.getElementsByClassName(workButtonImage)[0]; // Gets First SubHeading In A 'work-hover'
        var workSubheading = workButton.getElementsByClassName(workButtonSub)[0]; // Gets First SubHeading In A 'work-button'

        //Sets the workSubHeading Styles
        workSubheading.style.height = workImage.offsetHeight - fullBorderWidth + "px";
        workSubheading.style.lineHeight = workImage.offsetHeight - fullBorderWidth  + "px";
        workSubheading.style.width = workImage.offsetWidth - fullBorderWidth + "px";
    }
}

window.onresize = function () {
   resizeWorkOverlays(); // This will run everytime the browser resizes
}

resizeWorkOverlays(); // This sets the overlays initially

您还可以考虑使用正方形图片，并通过 border-radius 来使其拐角变圆，而不是使用“预格式化”图像。这样，覆盖层上的边框半径将与图片相匹配。仅供参考。更新后的 Fiddle： Fiddle。
我已经更新了我的答案，使用了你提供的图片，这证明非常有帮助。 - Brandon Davis
嘿，这非常有帮助，正是我在寻找的！不过我在我的页面上让它工作起来有点困难...... 我可以看到它在 fiddle 上运行良好，但在 Chrome 中只有图像显示，什么都不会发生，但在 Firefox 中图像甚至都不会显示... - Almost A Developer
我完全拆开了我的文件，并尝试查看是否有其他东西影响它。我确实发现它正在工作 - 有点。当我将鼠标悬停在左上角时，悬停框出现为足够文本的小框。 - Almost A Developer
@Jackie - 我已经按照你的要求完成了。唯一的更改在于JS文件中。只需用更新后的Fiddle中的新代码替换workoverlay.js文件中的JS即可。（最后一个链接）我已尽力测试过了。请告诉我结果如何。 - Brandon Davis
现在我解决了闪烁问题，并在火狐浏览器中解决了重叠问题，但现在我注意到另外一些奇怪的问题。当您打开页面并悬停在其中一个叠加层上时，它可以正常加载。但是，当您将屏幕缩小一点并再次悬停时，它会加载原始大小的叠加层，直到您刷新页面。下面的那些似乎没有这样的问题。这不是一个大问题，除非我要向某人展示，否则我希望它正常运行，因为这可能影响用户的可能性很小。 - Almost A Developer
显示剩余10条评论
1
我有一点困惑你要做什么，但是我可以帮你回答部分问题。
你可以使用以下CSS代码制作具有响应式背景图像的div：
.responsive-image{
  width: 100%;
  height: 0;
  padding-bottom: <!-- Divide the height by the width -->;
  background: url(@url) no-repeat;
  background-size: 100%;
  max-width: 810px;
}
谢谢！那非常有帮助。这是我尝试做的东西的图片链接。 - Almost A Developer
1
在.work-hover后面，在.work-button内添加一个覆盖层div（或任何其他标签）。
<div class="work-button">
  <img class="work-hover" src="http://oi41.tinypic.com/118m6fn.jpg" alt="" />
    <div class="work-overlay">Web Design</div>
  <div class="work-sub">Web Design</div>
</div>

我假设您想在悬停时显示它。
.work-button:hover .work-overlay {
  -webkit-transform: scale(1);
}

然后将你的样式添加到.work-overlay

Fiddle: http://jsfiddle.net/KdnJQ/4/

注意：由于您的图片格式，我使用了固定的宽度和高度值来创建遮罩层。

这正是我想要的，但是因为所有的大小属性都是按像素定义的，它无法与我的响应式网站配合使用。这是我遇到的主要问题，因为我无法弄清如何使大小正确。 - Almost A Developer
页面是否逐步增强？如果是，您应该考虑使用JS解决方案（在图像加载和窗口调整大小时更新覆盖层宽度）。 - rzr
让我解释一下我的想法，以使这更清晰。我的想法是，我可以对这里的图片应用图层样式，而不是使用一个图片，结果是第一张图片。当你悬停在盒子上时，绿色透明部分会扩展，文本会移动，覆盖层会变成橙色，如第二张图片所示。这只是比我想象中更困难，我甚至还没有完成我的网站的一半哈哈。 - Almost A Developer
我不太确定您所说的逐步增强是什么意思。我正在使用Foundation网格系统来实现响应式设计。 - Almost A Developer
你可以在较小的屏幕设备上隐藏覆盖层，因为它们很可能是触摸屏设备（没有鼠标，也不需要悬停）。 - rzr
禁用768像素以下的这些图标是可行的。不过，你的解决方案只在定义的像素大小下起作用，一旦窗口稍微小一点，它就无法工作。如果你对我的原始想法有建议，我会很感激。 - Almost A Developer
0
你是指像这样的东西吗？
<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <img class="hoverimage" src="http://static3.depositphotos.com/1000988/123/i/950/depositphotos_1238765-Transparent-background-with-gradient-eff.jpg" alt="" />
</div>
<style>
    .image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
    .image img { max-width: 100%; max-height: 100%; }
    .hoverimage { position: absolute; top: 0; left: 0; display: none; opacity: 0.5;}
    .image:hover .hoverimage { display: block; }
</style>

http://jsfiddle.net/Zf5am/699/

是的，除非可能，否则我想完全使用CSS而不使用图像来完成这个任务。当然，除了第一个之外。 - Almost A Developer
0
如果您可以将外部容器（.work-button）更改为具有position:relative的inline-block而不是块，则可以添加一个带有position:absolute的覆盖层div，并使其使用width:100％; height:100％占用父元素的尺寸：
<div class="work-button">
    <img class="work-hover" src="http://oi41.tinypic.com/118m6fn.jpg" alt="" />
    <div class="work-sub">Web Design</div>
    <div class="overlay"></div>
</div>


.work-button:hover .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.work-button:hover .overlay {
     background: rgba(229, 115, 37, 0.7);
     transition: all 0.4s ease-in-out;
     transform: scale(0);
     border-radius: 20%;
}

http://jsfiddle.net/KdnJQ/5/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接