belmo belmo - 4 months ago 16
CSS Question

Show div on hover image

I know there was bounch of questions like these but I was searching and i didn't find anything that help me so i ask new.

Well, I want when I hover on image to bring down opacity to 0.2 (this works) and to show link icon (this don't work, and I was trying everything I found, everything I know but nothing)

jsfiddle.net/raxoes55/3/


I want to show #articles .box .box-image .hover when i hover on #articles .box .box-image img:hover

Thanks!

Answer

Instead of the selector to find the adjacent of hovered image

#articles .box .box-image img:hover + #articles .box .box-image .hover

You can use the hover pseudo selector of the .box-image div as follows

#articles .box .box-image:hover .hover

Check the following working code snippet, it has following 2 fixes

  • Inorder to properly position an element using absolute position - Use a relative div (parent). In your code, i have modified .hover parent as relative
  • I have asssigned z-index to bring the absolute div above the image

/*------------------------------*/

/*     #ARTICLES SEKCIJA        */

/*------------------------------*/

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 #articlesrow {
  margin-top: 50px;
}
#articles {
  width: 225px;
  height: auto;
  padding: 0;
  margin: 0;
}
#articles .box {
  height: auto;
}
#articles .box .box-image {
  background-color: #00e4ff;
  height: 250px;
  position:relative;
}
#articles .box .box-image .hover {
  position: absolute;
  line-height: 250px;
  left: 45%;
  display: none;
}
#articles .box .box-info {
  margin-top: 20px;
}
#articles .box .box-info .title p {
  font-weight: 400;
}
#articles .box .box-info .date p {
  font-weight: 400;
  font-size: 12px;
  float: left;
}
#articles .box .box-info .see-more {
  float: right;
}
#articles .box .box-info .see-more i:hover {
  color: #006975;
}
#articles .box .box-image img:hover {
  opacity: 0.5;
}
#articles .box .box-image:hover .hover {
  display: block;
  z-index: 10;
}
<div class="news" id="news">
  <div class="container">


    <div class="row" id="articlesrow">

      <div class="col-md-3" id="articles">
        <div class="box">

          <div class="box-image">

            <div class="hover">
              <a href="#"><i class="material-icons  md-24  white">link</i></a>
              <!--[if IE]>
									<a href="#"><i class="material-icons  md-24  white">&#xE157;</i></a>
									<![endif]-->
            </div>

            <img src="https://placehold.it/225x250" alt="">

          </div>
          <!--end of .box-image-->


          <div class="box-info">

            <div class="title">
              <p>Lorem ipsum dolor sit amet, consect adipiscing elit, sed d...</p>
            </div>

            <div class="date">
              <p>22. JULI</p>
            </div>

            <div class="see-more">
              <a href="#"><i class="material-icons  md-24  lg-blue2">trending_flat</i></a>
              <!--[if IE]>
										<a href="#"><i class="material-icons md-24  lg-blue2">&#xE8E4;</i></a>
									<![endif]-->
            </div>

          </div>
          <!-- end of .box-info-->

        </div>
        <!-- end of .box-->
      </div>
      <!-- end of .col-md-3-->

    </div>
    <!--end of .row-->




  </div>
  <!--end of .container-->
</div>
<!--end of .news-->