图像悬停上的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解决方案！ 我很快就会在这里发布结果代码。

Answer 1

这就是我想出的：

（更新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对角进行舍入，而不是使用“预格式化”的图像。 然后叠加层上的边框半径将与图像匹配。 只是一个想法。

更新小提琴：

小提琴

Answer 2

我对你要做的事情有点困惑，但我可以帮你解决部分问题。

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

Answer 3

在.work-hover之后，在.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

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

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

Answer 4

你的意思是这样的吗？

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

Answer 5

如果您可以将外部容器（ .work-button ）更改为具有position:relative而不是inline-block的inline-block块，则可以添加一个position: absolute的overlay div，并使其具有width: 100%; height: 100%的父级width: 100%; height: 100% 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/