javascript 图像悬停上的 CSS 颜色叠加

Question

提问by Almost A Developer

I've tried other answers but I haven't got one to work with my particular set up. I can't use any ul/li set ups, so please don't suggest that. I'm trying to get a slightly transparent orange layer to show up over an image. I can't use absolute positioning, this site is built on foundation 4 and is responsive.

我尝试了其他答案，但没有一个适合我的特定设置。我不能使用任何 ul/li 设置，所以请不要建议。我试图让一个稍微透明的橙色层显示在图像上。我不能使用绝对定位，这个网站建立在基础 4 上并且是响应式的。

So far what I'm getting is a background-color under the image instead of on top of it. Originally I also wanted to have the green bar from the image done in CSS but I couldn't make that work either. I haven't been able to make it work with the image as a background for a div either, as I'd have to set the height/width with pixels and that breaks the responsive bit.

到目前为止，我得到的是图像下方而不是顶部的背景颜色。最初我还想在 CSS 中完成图像中的绿色条，但我也无法做到这一点。我也无法使用图像作为 div 的背景，因为我必须用像素设置高度/宽度，这会破坏响应位。

Here's an image of what I'm trying to do:

这是我正在尝试做的事情的图像：

Here's an image of what I'm trying to do.

这是我正在尝试做的事情的图像。

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%;
 }

NOTE ABOUT ANSWERThe selected answer does have its bugs. When you resize the page, the overlay won't resize with it. Instead it will stay at the size that it initialized at with the page. When you refresh the page again, it adjusts itself again. This isn't an issue for users, but more of something that bugs me and would be an issue with other developers/employers inspecting it. Regardless, thanks again Brandon Davis!

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

** UPDATE **

** 更新 **

So it seems I was calling the onresize function twice, so it was only obeying what the second function was trying to do.

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

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

If you are trying to use this function twice, this the way I got it to work. I can't seem to repeat it a third time successfully though. Hope this helps!

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

FINAL UPDATEAugust 07, 2014: See this new result functioning here.I've since switched over to a 100% CSS solution for my hovers! I'll post the resulting code here soon.

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

Answer 1

采纳答案by Brandon Davis

This is what I came up with:

这就是我想出的：

(UPDATE 3)

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

I ended up using Javascript to create the initial height and width of the div. Based on the height of the image so it can still be responsive. It may not be the most elegant way but it works.

我最终使用 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

You may also consider using a square image and rounding the corners with border-radius instead of using a "pre-formatted" image. Then the border radius on the overlay will match the image. Just a thought though.

您还可以考虑使用方形图像并使用 border-radius 圆角，而不是使用“预先格式化”的图像。然后叠加层上的边框半径将与图像匹配。只是一个想法。

UPDATED Fiddle:

更新的小提琴：

Fiddle

小提琴

Answer 2

回答by rzr

Add an overlay div(or any other tag) inside .work-button, after .work-hover

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>

I'm assuming you want to show it on hover so

我假设你想在悬停时显示它所以

.work-button:hover .work-overlay {
  -webkit-transform: scale(1);
}

Then add your style to .work-overlay

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

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

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

Note: Due to your image's formation I used fixed width and height values for the overlay.

注意：由于您的图像的形成，我对覆盖层使用了固定的宽度和高度值。

Answer 3

回答by Syren

I'm a little bit confused as to what you are trying to do but I can help you with part of your question.

我对您要做什么感到有些困惑，但我可以帮助您解决部分问题。

You can make a responsive div with CSS background image with this:

您可以使用以下 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 4

回答by OBV

Do you mean something like this?

你的意思是这样的吗？

<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

回答by bfavaretto

If you can change your outer container (.work-button) to be an inline-blockwith position:relativeinstead of a block, you can add an overlay div with position: absolute, and make it take the dimensions of the parent with width: 100%; height: 100%:

如果您可以将外部容器 ( .work-button) 更改为inline-blockwithposition:relative而不是块，您可以添加一个覆盖 div with 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 颜色叠加

提问by Almost A Developer

HTML

HTML

CSS

CSS

采纳答案by Brandon Davis

回答by rzr

回答by Syren

回答by OBV

回答by bfavaretto

相关推荐

最近更新

标签

javascript 图像悬停上的 CSS 颜色叠加

提问by Almost A Developer

HTML

HTML

CSS

CSS

采纳答案by Brandon Davis

回答by rzr

回答by Syren

回答by OBV

回答by bfavaretto

相关推荐

用于动态网络可视化的 JavaScript 库？

javascript 使用 angular-ui bootstrap 和 typeahead-loading

javascript Bootstrap3 col-md-4 和 col-lg-4 在 IE8 上不起作用？

javascript Angularjs $document[0].activeElement 而不是 $document.activeElement

相关推荐

最近更新

标签