javascript - 图像悬停时的 CSS 颜色叠加

Question

我尝试了其他答案，但没有一个可以与我的特定设置一起使用。我不能使用任何 ul/li 设置，所以请不要这样建议。我试图让一个稍微透明的橙色层出现在图像上。我不能使用绝对定位，这个网站是建立在基础 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%;
 }

关于答案 的注意事项所选答案确实有其错误。当您调整页面大小时，叠加层不会随之调整大小。相反，它将保持与页面一起初始化的大小。当您再次刷新页面时，它会再次自我调整。这对用户来说不是问题，但更多的是让我感到烦恼的事情，并且会成为其他开发人员/雇主检查它的问题。无论如何，再次感谢布兰登戴维斯！

** 更新 **

所以似乎我调用了 onresize 函数两次，所以它只是服从第二个函数试图做的事情。

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

如果您尝试使用此功能两次，这就是我让它工作的方式。不过，我似乎无法成功重复第三次。希望这可以帮助！

最终更新2014 年 8 月 7 日：在此处查看此新结果。从那以后，我为悬停切换到 100% CSS 解决方案！我很快就会在这里发布生成的代码。

score 2 · Accepted Answer

这就是我想出的：

（更新 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

您也可以考虑使用方形图像并使用边框半径圆角而不是使用“预格式化”图像。然后覆盖层上的边框半径将与图像匹配。不过只是一个想法。

更新小提琴：

小提琴

score 1 · Accepted Answer

我对你想要做什么有点困惑，但我可以帮助你解决部分问题。

您可以使用 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;
}

score 1 · Accepted Answer

在, 之后添加一个覆盖div（或任何其他标签）.work-button.work-hover

<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

小提琴：http: //jsfiddle.net/KdnJQ/4/

注意：由于您的图像形成，我使用固定的宽度和高度值进行叠加。

score 0 · Accepted Answer

你的意思是这样的吗？

<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/

score 0 · Accepted Answer

如果您可以将外部容器 ( .work-button) 更改为inline-blockwithposition:relative而不是块，则可以添加一个覆盖 div position: absolute，并使其采用父级的尺寸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/

javascript - 图像悬停时的 CSS 颜色叠加

HTML

CSS

5 回答 5

Related

Reference