CODEWITHSUNDEEP
htmltwitter-bootstrapcss
vineeth
vineeth

Reputation: 53

hover effect of all the elements inside the class

i have been struggling for 90 minutes to solve this please help me I used bootstrap to create rows and columns.there is a image and text pair both are in the separate columns.image is in the col-sm-1 and text in the col-sm-3 next to the image column. below is the original code

<!DOCTYPE html>
<html lang="en">
<head>
<title>top categories</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script        src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
 </script>
 <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">     </script>
</head>
<style>
img{
 border-radius:50%;
 width:90px;
 height:90px;
 -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
 }
img:hover{
box-shadow: 0px 0px 20px green;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.2);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.2);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.2);
 transition: all 200ms ease-in;
 transform: scale(1.2);

}

}
.container-fluid{
 width:1349px;
 height:401px;
 border:1px solid black;

}
.row{
  height:100px;
}
h1:hover {

 text-shadow:2px 2px 2px #aaa;
}
h3:hover{
text-shadow:2px 2px 2px ;
border:1px 1px grey;
color:lightblue;

}

</style>

<body>
<!-- top categories code begins here  -->
 <div class="container-fluid">
 <div class="row">
 <h1 class="col-md-4"></h1>
 <h1 class="col-md-4">TOP CATEGORIES</h1>
 <h1 class="col-md-4"></h1>
</div>
<div class="row">
 <div class="col-md-1" ></div>
 <div class="col-md-1 " >
  <img src="General Surgery.png">
  </div>
  <div class="col-md-3 "  >
    <h3>GENERAL SURGERY</h3>
  </div>


  <div class="col-md-2" ></div>
 <div class="col-md-1"><img src="pregnancy.png"></div>
 <div class="col-md-3" ><h3>GYNACOLOGY</h3> </div>
 <div class="col-md-1"></div>
 </div>



  <div class="row">
  <div class="col-sm-1" ></div>
  <div class="col-sm-1"><img src="medicine.png"></div>
  <div class="col-sm-3" ><h3>MEDICINE</h3></div>
  <div class="col-sm-2" ></div>
  <div class="col-sm-1" ><img src="Psychitary.png"></div>
  <div class="col-sm-3" ><h3>PHSYCHAIRTRY</h3></div>
  <div class="col-sm-1" ></div>
  </div>

    <div class="row">
      <div class="col-sm-1" ></div>
      <div class="col-sm-1"><img src="Paediatrics.png"></div>
      <div class="col-sm-3" ><h3>PEDIATRICS</h3></div>
      <div class="col-sm-2" ></div>
      <div class="col-sm-1" ><img src="grid1.jpg"></div>
      <div class="col-sm-3" ><h3>OTHERS</h3></div>
      <div class="col-sm-1" ></div>
    </div>

 </div>
 </body>
 </html>

current style is i hover on image ,it scales . i hover on the text ,text-shadow changes. what i need on hover over the image: image scales and text in adjacent column shows shadow.or vice versa what i tried test1: added common div to both the image and text.but the result is on hover image border property got applied to whole div (which i don't want). trial2:reffered stack-overflow link about hover on div to change all elements inside that div .added common class to img and h3 .then used

 <div class="col-md-3 block1"  >
   <div class="col-md-1" ></div>
   <style>
  .block1:hover h3{
   text-shadow:2px 2px 2px #aaa;
   }
  .block1:hover img{
   box-shadow: 0px 0px 20px green;
   z-index: 2;
 -webkit-transition: all 200ms ease-in;
 -webkit-transform: scale(1.2);
 -ms-transition: all 200ms ease-in;
 -ms-transform: scale(1.2);
 -moz-transition: all 200ms ease-in;
 -moz-transform: scale(1.2);
 transition: all 200ms ease-in;
 transform: scale(1.2);

 }
 </style>

Upvotes: 0

Views: 1338

Answers (1)

lalit bhakuni
lalit bhakuni

Reputation: 627

<!DOCTYPE html>
<html lang="en">
<head>
<title>top categories</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script        src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
 </script>
 <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">     </script>
</head>
<style>
img{
 border-radius:50%;
 width:90px;
 height:90px;
 -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
 }


}
.container-fluid{
 width:1349px;
 height:401px;
 border:1px solid black;

}
.row{
  height:100px;
}
h1:hover {

 text-shadow:2px 2px 2px #aaa;
}


.hover-img:hover img{
box-shadow: 0px 0px 20px green;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.2);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.2);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.2);
 transition: all 200ms ease-in;
 transform: scale(1.2);

} 

.hover-img:hover h3{
text-shadow:2px 2px 2px ;
border:1px 1px grey;
color:lightblue;
}


</style>

<body>
<!-- top categories code begins here  -->
 <div class="container-fluid">
 <div class="row">
 <h1 class="col-md-4"></h1>
 <h1 class="col-md-4">TOP CATEGORIES</h1>
 <h1 class="col-md-4"></h1>
</div>
<div class="row">
<div class="col-md-6 hover-img">
 <div class="col-md-4 ">
  <img src="http://www.grammarchecksoftware.org/wp-content/uploads/2015/09/checker-man.png">
  </div>
  <div class="col-md-8">
    <h3>GENERAL SURGERY</h3>
  </div>

</div>


<div class="col-md-6 hover-img">
  <div class="col-md-4 ">
  <img src="http://www.grammarchecksoftware.org/wp-content/uploads/2015/09/checker-man.png">
  </div>
  <div class="col-md-8">
    <h3>GENERAL SURGERY</h3>
  </div>

</div>


 </div>
 
 
 <div class="row">
<div class="col-md-6 hover-img">
 <div class="col-md-4 ">
  <img src="http://www.grammarchecksoftware.org/wp-content/uploads/2015/09/checker-man.png">
  </div>
  <div class="col-md-8">
    <h3>GENERAL SURGERY</h3>
  </div>

</div>


<div class="col-md-6 hover-img">
  <div class="col-md-4 ">
  <img src="http://www.grammarchecksoftware.org/wp-content/uploads/2015/09/checker-man.png">
  </div>
  <div class="col-md-8">
    <h3>GENERAL SURGERY</h3>
  </div>

</div>


 </div>
 
 
 
 </body>
 </html>

try this one it's half full i thing .

Upvotes: 1

Related Questions