Hover transitions

In this example below you will see how to do a Hover transitions with some HTML / CSS and Javascript

Forked from michelle currier's Pen Hover transitions.

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©
  • HTML
  • CSS
  • JavaScript
    <div class="team">
<div class="sam circle">
  <div class="pop">
    <p>name</p>
    <span>Chief Executive Officer</span>
  </div>
</div>

<div class="caroline circle">
  <div class="pop">
    <p>Caroline Mendez</p>
    <span>Chief Marketing Officer</span>
  </div>
</div>
</div>


/*Downloaded from https://www.codeseek.co/mush_el/hover-transitions-NPVvXK */
    .team {
  width: 1000px;
  margin: auto;
}
.circle {
  width: 180px;
  height: 180px;
  display: inline-block;
  position: relative;
  transition: all 1s ease-in-out;
  margin: 10px;
}
.pop {
  width: 100%;
  height: 100%;
  display: inline-block;
  border-radius: 160px;
  color: #fff;
  text-align: left;
  opacity: 1;
  position: absolute;
  transform: scale(.9, .9);
  transition: all 1s ease-in-out; 
}
.sam .pop{
   background: url('http://michelle.hitpath.com/images/sam.jpg');
  background-position: -120px -10px;
}

.caroline .pop {
  background: url('http://michelle.hitpath.com/images/caroline.jpg');
  background-position: -160px -10px;
}

.circle.clicked {
  z-index: 1000;
}
.caroline.clicked .pop, .sam.clicked .pop {
  opacity: 1;  
  border-radius: 0px;
  width: 400px;
  height: 200px;
  opacity: 1;
  background-position: center center;
  border-radius: 4px;
  transform: translateX(-25%);
  transition: all 1s ease-in-out; 
}

.pop p, .pop span {
  opacity: 0;
  transition: all 1s ease;
}
.clicked .pop p, .clicked .pop span {
  opacity: 1;
  transition: all 1s ease;
}
.pop p {
  margin: 0px;
  padding: 120px 0px 0px 15px;
  opacity: 0;
}
.pop span {
  padding-left: 15px;
  font-size: 14px;
}


/*Downloaded from https://www.codeseek.co/mush_el/hover-transitions-NPVvXK */
    //$( ".circle" ).click(function() {
//  $(this).find( ".pop" //).toggleClass('clicked');
  
//});

// need to find child 
   // var circleWidth = 160;
  //  var circleHeight = 160;
// make pop before it adds clicked be circleWidth and circleHeight
$(".circle").click(function() {
  if( $( this ).hasClass( 'clicked' ) )  {
  	$('.circle').removeClass('clicked');
  } else {
  	$('.circle').removeClass('clicked');
    $(this).addClass( "clicked" );
	}
});

Comments