悬停时使图像变暗 [英] Darken image on hover

问题描述

尝试让图片在悬停时变暗，但有些东西是坏的。

我使用span创建较暗的图层，但当我添加它，坏。

 < div class =postOUT> 
 
< div class =post_first> 
< span>< / span> 
< div class =category> Stuff< / div> 
< h1>文本将在此处< / h1> 
< / div> 
  

CSS：

• 没有SPAN - http://jsfiddle.net/np2fLwva/


• 使用SPAN - http://jsfiddle.net/tvL84sd9/

有另一种方法来创建此效果吗？ / p>

解决方案

语义 span 元素应用于内联对象。你的用例在这里是一个块级元素。所以至少，我建议使用 div 元素。为了消除空的HTML元素，考虑将后台覆盖放在：之前 / ：之后伪元素。 p>

侧音：根据 CanIUse.com ，您只需要 -webkit 转换供应商前置字元，这只适用于旧版的Android浏览器。否则，你可以简单地说明 transition：[values] 。

这里有一个例子：

  .post_first {overflow：auto;清除： height：649px; background：url（http://japanpapa.ru/fun/jpap/img/featured-bg.png），url（http://japanpapa.ru/fun/jpap/img/post01.jpg）no-repeat center center ; background-size：cover; position：relative;}。post_first。-content {position：relative; z-index：1000;}。post_first：before {position：absolute; top：0; bottom：0; left：0; right：0;不透明度：0; background：rgba（0，0，0，.5）; -webkit-transition：opacity 0.25s ease-in-out;过渡：不透明0.25s缓入; content：; z-index：999;}。post_first：hover：before {opacity：1;}类别{font-family：'Open Sans'，sans-serif; font-size：1.5em; font-weight：500; text-transform：uppercase;颜色：白色; padding：10px; border：3px solid #fff; margin：30px auto; text-align：center; width：150px;位置：相对; top：7.4％;}。post_first h1，.post_other h1 {font-family：'Open Sans'，sans-serif; font-size：3em; font-weight：800; text-transform：uppercase;颜色：白色;填充：0 10％; margin：30px auto; text-align：center;位置：相对; top：14.5％;}  

 < div class = postOUT> < div class =post_first> < div class = -  content> < div class =category> Stuff< / div> < h1>文字将在此处< / h1> < / div> < / div>< / div>  

Trying to make the image dark on hover but something is wronge.

I have used "span" to create the darker layer but when I add it, it looks bad.

<div class="postOUT">

    <div class="post_first">
        <span></span>
        <div class="category">Stuff</div>
        <h1>Text will go here</h1>
    </div>

FULL CODE WITH CSS:

• Without SPAN - http://jsfiddle.net/np2fLwva/
• With SPAN - http://jsfiddle.net/tvL84sd9/

Is there another way to create this effect?

解决方案

Semantically span elements should be used for inline objects. Your use-case here is a block-level element though. So at a minimum, I would recommend using a div element. To eliminate empty HTML elements though, consider placing the background overlay on a :before/:after pseudo element.

Side-note: According to CanIUse.com, you only need a -webkit vendor prefix for transitions, and that's only for older Android browsers. Otherwise you're fine simply stating transition: [values].

Here's an example:

.post_first {
  overflow: auto;
  clear: both;
  height: 649px;
  background: url(http://japanpapa.ru/fun/jpap/img/featured-bg.png), url(http://japanpapa.ru/fun/jpap/img/post01.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
}
.post_first .-content {
  position: relative;
  z-index: 1000;
}
.post_first:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background: rgba(0, 0, 0, .5);
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  content: "";
  z-index: 999;
}
.post_first:hover:before {
  opacity: 1;
}
.category {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  text-transform: uppercase;
  color: white;
  padding: 10px;
  border: 3px solid #fff;
  margin: 30px auto;
  text-align: center;
  width: 150px;
  position: relative;
  top: 7.4%;
}
.post_first h1,
.post_other h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 3em;
  font-weight: 800;
  text-transform: uppercase;
  color: white;
  padding: 0 10%;
  margin: 30px auto;
  text-align: center;
  position: relative;
  top: 14.5%;
}

<div class="postOUT">

  <div class="post_first">
    <div class="-content">
      <div class="category">Stuff</div>
      <h1>Text will go here</h1>
    </div>
  </div>

</div>

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