CODEWITHSUNDEEP
htmlcss
Alexey Tseitlin
Alexey Tseitlin

Reputation: 1309

hover stops working when I add more element

Here is a simple site: 1 featured post and 3 small boxes under. I have a darkening effect on hover. The problem is when I add the small boxes. It stops working =(

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

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

FULL CODE WITH CSS:

Upvotes: 0

Views: 51

Answers (2)

DoXicK
DoXicK

Reputation: 4812

your .small_boxes (box01, box02, box03) miss a position: relative. If you add that, you are done.

Your boxes float in their parent. Their parent has position: relative. The spans get the full height+width of that parent, which is 0x0, since its children float.

.small_boxes    <-- position: relative. 0x0
  .box01/02/03  <-- float: left
    span        <-- 100% of .small_boxes = 0x0

What you want:

.small_boxes
  .box01/02/03  <-- float: left, position: relative;
    span        <-- 100% of .box = desired effect

Upvotes: 1

jbutler483
jbutler483

Reputation: 24549

you could use pseudo elements to achieve this effect, which would reduce markup considerably:

.cont {
  position: relative;
  background: url(http://japanpapa.ru/fun/jpap/img/post01.jpg);
  background-size: 100% 100%;
  height: 100px;
  width: 100px;
  displaY: inline-block;
  margin: 10px;
}
.text {
  display: inline-block;
  color: white;
  font-size: 20px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  line-height:100px;
}
.cont:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: black;
  transition: all 0.4s;
  opacity: 0;
}
.cont:hover:before {
  opacity: 0.6;
}
<div class="cont">
  <div class="text">text1</div>
</div>
<div class="cont">
  <div class="text">text2</div>
</div>
<div class="cont">
  <div class="text">text3</div>
</div>

Upvotes: 0

Related Questions