在图像悬停上显示文本

时间：2016-08-16 16:18:08

标签： html css image hover responsive

我试图在悬停时向图片添加文字。也许我需要第二眼看看我做错了什么？

＆＃13;
＆＃13; 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  max-width: 947px;
}
[class*=bit-] {
  float: left;
  padding: .3em;
  position: relative;
}
button {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  border:none;
  display: none;
  cursor: pointer;
  background-color: black;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.static {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  border:none;
  display: block;
  cursor: pointer;
  background-color: black;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
}
 
 p.important {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size:12px;
  color:#fff;
  display: none;
  width: 50%;
  left: 50%;
  top: 80%;
  position: absolute;
  transform: translate(-50%, -50%);
  text-align:center;
 }
	

.imgHover {
	max-width: 100%;
    max-height: 100%;
    transition: .2s all;
}
.imgHover img:hover {
	-webkit-filter: brightness(50%);
}
.imgHover:hover button {
  display: initial;
}

.imgHover:hover .important {
	display: initial;
}
/* Grids */

.box {
  background: #00aabe;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 20px 0;
}
.box-2 {
  background: #00aabe;
}
.bit-1 {
  width: 100%;
}
.bit-2 {
  width: 50%;
}
.bit-3 {
  width: 33.33333%;
}
.bit-4 {
  width: 25%;
}
.bit-5 {
  width: 20%;
}
.bit-6 {
  width: 16.66667%;
}
.bit-7 {
  width: 14.28571%;
}
.bit-8 {
  width: 12.5%;
}
.bit-9 {
  width: 11.11111%;
}
.bit-10 {
  width: 10%;
}
.bit-11 {
  width: 9.09091%;
}
.bit-12 {
  width: 8.33333%;
}
.bit-25 {
  width: 25%;
}
.bit-40 {
  width: 40%;
}
.bit-60 {
  width: 60%;
}
.bit-75 {
  width: 75%;
}
.bit-35 {
  width: 35%;
}
.bit-65 {
  width: 65%;
}
/* Responsive Goodness */

/* Defaults above are set Desktop resolution or higher */

/* Laptop */

@media (min-width: 50em) and (max-width: 68.75em) {
  .bit-7,
  .bit-35,
  .bit-65 {
    width: 100%;
  }
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-8 {
    width: 50%;
  }
}
/* Tablet */

@media (min-width: 30em) and (max-width: 50em) {
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-6,
  .bit-8 {
    width: 50%;
  }
  .bit-1,
  .bit-11,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9 {
    width: 100%;
  }
}
/* Mobile */

@media (max-width: 30em) {
  .bit-1,
  .bit-10,
  .bit-11,
  .bit-12,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9 {
    width: 100%;
  }
}
＆＃13; 
<div class="container">
    <!-- Hero Image -->
    <div class="bit-1">
    <div class="box">hero</div>
    </div>
    <!-- Mini CSS Slider -->
    <div class="bit-1">
    <div class="box">mini slider</div>
    </div>
    <!-- Story1 with Rollover Hover -->
    <div class="bit-2">
    <div class="imgHover"><img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%">
    <p class="important">Hey there.</p>
    <button>Shop Now</button>
    </div>
    </div>
    <!-- Story2 with Rollover Hover -->
    <div class="bit-2">
    <div class="imgHover"><img src="http://i.imgur.com/0hFyr98.jpg" width="100%"><button>Shop Now</button></div>
    </div>
    <!-- Story3 with Rollover Hover -->
    <div class="bit-2">
    <img src="http://i.imgur.com/0hFyr98.jpg" width="100%"><button class="static">Shop Now</button>
    </div>
    <!-- Story4 with Rollover Hover -->
    <div class="bit-2">
    <img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%"><button class="static">Shop Now</button>
    </div>
    <!-- Skinny Banner -->
    <div class="bit-1">
    <div class="box">small banner</div>
    </div>
    <!-- Rewards -->
    <div class="bit-2">
    <div class="box">rewards</div>
    </div>
    <!-- Store Locator -->
    <div class="bit-2">
    <div class="box">store locator</div>
    </div>
    
    </div>
＆＃13;
＆＃13;
＆＃13;

所以这里是我最初使用相同代码工作得很好的屏幕截图。也许我错过了什么？任何建议都将不胜感激。

enter image description here

2 个答案:

答案 0 :(得分：3)

你有一个CSS语法问题，创建一个错误链。 仔细检查第44/45行，您有以下文字：

.static {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  border:none;
  display: block;
  cursor: pointer;
  background-color: black;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
}

只需删除额外的}即可解决问题。

工作示例： 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  max-width: 947px;
}
[class*=bit-] {
  float: left;
  padding: .3em;
  position: relative;
}
button {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  border: none;
  display: none;
  cursor: pointer;
  background-color: black;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
.static {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  border: none;
  display: block;
  cursor: pointer;
  background-color: black;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
p.important {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  display: none;
  width: 50%;
  left: 50%;
  top: 80%;
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
}
.imgHover {
  max-width: 100%;
  max-height: 100%;
  transition: .2s all;
}
.imgHover img:hover {
  -webkit-filter: brightness(50%);
}
.imgHover:hover button {
  display: initial;
}
.imgHover:hover .important {
  display: initial;
}
/* Grids */

.box {
  background: #00aabe;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 20px 0;
}
.box-2 {
  background: #00aabe;
}
.bit-1 {
  width: 100%;
}
.bit-2 {
  width: 50%;
}
.bit-3 {
  width: 33.33333%;
}
.bit-4 {
  width: 25%;
}
.bit-5 {
  width: 20%;
}
.bit-6 {
  width: 16.66667%;
}
.bit-7 {
  width: 14.28571%;
}
.bit-8 {
  width: 12.5%;
}
.bit-9 {
  width: 11.11111%;
}
.bit-10 {
  width: 10%;
}
.bit-11 {
  width: 9.09091%;
}
.bit-12 {
  width: 8.33333%;
}
.bit-25 {
  width: 25%;
}
.bit-40 {
  width: 40%;
}
.bit-60 {
  width: 60%;
}
.bit-75 {
  width: 75%;
}
.bit-35 {
  width: 35%;
}
.bit-65 {
  width: 65%;
}
/* Responsive Goodness */

/* Defaults above are set Desktop resolution or higher */

/* Laptop */

@media (min-width: 50em) and (max-width: 68.75em) {
  .bit-7,
  .bit-35,
  .bit-65 {
    width: 100%;
  }
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-8 {
    width: 50%;
  }
}
/* Tablet */

@media (min-width: 30em) and (max-width: 50em) {
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-6,
  .bit-8 {
    width: 50%;
  }
  .bit-1,
  .bit-11,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9 {
    width: 100%;
  }
}
/* Mobile */

@media (max-width: 30em) {
  .bit-1,
  .bit-10,
  .bit-11,
  .bit-12,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9 {
    width: 100%;
  }
}
<div class="container">
  <!-- Story1 with Rollover Hover -->
  <div class="bit-2">
    <div class="imgHover">
      <img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%">
      <p class="important">Hey there.</p>
      <button>Shop Now</button>
    </div>
  </div>
  <!-- Story2 with Rollover Hover -->
  <div class="bit-2">
    <div class="imgHover">
      <img src="http://i.imgur.com/0hFyr98.jpg" width="100%">
      <button>Shop Now</button>
    </div>
  </div>
  <!-- Story3 with Rollover Hover -->
  <div class="bit-2">
    <img src="http://i.imgur.com/0hFyr98.jpg" width="100%">
    <button class="static">Shop Now</button>
  </div>
  <!-- Story4 with Rollover Hover -->
  <div class="bit-2">
    <img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%">
    <button class="static">Shop Now</button>
  </div>
  <!-- Skinny Banner -->
  <div class="bit-1">
    <div class="box">small banner</div>
  </div>
  <!-- Rewards -->
  <div class="bit-2">
    <div class="box">rewards</div>
  </div>
  <!-- Store Locator -->
  <div class="bit-2">
    <div class="box">store locator</div>
  </div>
</div>

尝试通过验证程序运行代码或使用devtools进行检查。

答案 1 :(得分：0)

<ul class="img-list">
<li>
<img src="image 2.jpg" width="300" height="300" />
<span class="text-content"><span>Place Name</span></span>
</a>
</li>
</ul>

ul.img-list { 
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

ul.img-list li {
display: inline-block;
height: 150px; 
margin: 0 1em 1em 0;
position: relative;
width: 150px;
}

span.text-content {
background: rgba(0,0,0,0.5); 
color: white;
cursor: pointer;
display: table;
height: 300px;
left: 0;
position: absolute;
top: 0; 
width: 300px;
opacity:0;
}

ul.img-list li:hover span.text-content {
display: table-cell;
text-align: center;
vertical-align: middle;
opacity:1;
}
相关问题
最新问题