CODEWITHSUNDEEP
htmlcss
WikStar
WikStar

Reputation: 11

Light box hover do not work properly

Hello i made inline block list and wanted to made light hover around images. It works but not as i wanted, because light is around half of the image and it dont look nice. Maybe someone can tell me what i do wrong with my CSS and HTML and how can i make that light box go around my image? 

#planet {
   background-repeat: no-repeat;
   height: 350px;
   margin: 2px 2px 2px 2px;
   position: relative;
   width: 679px; 
}

.planet2 {
   display: inline-block;
   text-align:center;
   margin: 2px 2px 2px 2px;
}

.planet2 .img_img{
   width: 220px;
   text-align:center;
   height: 130px;
   -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
   transition: width 2s;
}

.planet2:hover > .ahove{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
  -moz-box-shadow:    0px 0px 30px 0px rgba(0, 255, 0, 0.67);
  box-shadow:         0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}


.planet2 .img_description {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}
<div id="planet" style="background-image:url(../game/styles/images/port/rsz_senat_eo2.jpg)">
 
 <div class="planet2">
  <a class="ahove" href="">
   <img class="img_img" src="../game/styles/images/port/rsz_achiev_b.jpg"/> 
   <p class="img_description">Achievements</p>
  </a>
 </div> 
</div>

In here my light hover looks different, it goes around in the bottom of image, but in my page it goes in left side half till images middle and then line goes to middle of images bottom.

Upvotes: 0

Views: 46

Answers (2)

PHP Geek
PHP Geek

Reputation: 4033

you can try this also

#planet {
    background-repeat: no-repeat;
    height: 350px;
   margin: 2px 2px 2px 2px;
    position: relative;
    width: 679px;

}



.planet2 {
    display: inline-block;
    text-align:center;
    margin: 2px 2px 2px 2px;
}

.planet2 .img_img{
    width: 220px;
    text-align:center;
    height: 130px;
     -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;

}


.img_img:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow:         0px 0px 30px 0px rgba(0, 255, 0, 0.67);

}


.planet2 .img_description {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}


<div id="planet" style="background-image:url(../game/styles/images/port/rsz_senat_eo2.jpg)">

<div class="planet2">
            <a class="ahove" href="">
            <img class="img_img" src="../game/styles/images/port/rsz_achiev_b.jpg"/> 
        <p class="img_description">Achievements</p>
        </a>
        </div>

    </div>

Upvotes: 0

Mers
Mers

Reputation: 734

You have to change .planet2:hover > .ahove to .planet2:hover > .ahove img, and that'll do the trick.

#planet {
  background-repeat: no-repeat;
  height: 350px;
  margin: 2px 2px 2px 2px;
  position: relative;
  width: 679px;

}



.planet2 {
  display: inline-block;
  text-align:center;
  margin: 2px 2px 2px 2px;
}

.planet2 .img_img{
  width: 220px;
  text-align:center;
  height: 130px;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;

}


.planet2:hover > .ahove img{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
  -moz-box-shadow:    0px 0px 30px 0px rgba(0, 255, 0, 0.67);
  box-shadow:         0px 0px 30px 0px rgba(0, 255, 0, 0.67);

}


.planet2 .img_description {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}
<div id="planet" style="background-image:url(../game/styles/images/port/rsz_senat_eo2.jpg)">

  <div class="planet2">
    <a class="ahove" href="">
      <img class="img_img" src="../game/styles/images/port/rsz_achiev_b.jpg"/> 
      <p class="img_description">Achievements</p>
    </a>
  </div>

</div>

Upvotes: 1

Related Questions