Effect image on hover with css - html

Question

I am trying to animated an image on hover. The result i want to have is similar to this one : See here ( scroll to see the image "Our Team" )
So, I want to have a background where i could display some information ( name, links) exactly like in this theme but I can't achieve it.
Here is my code :
<div class="row">
<div class="col-md-6">
<div class="picture">
<div class="photoapropos center-block">
<div class="info">
<img class="img-responsive img-circle" alt="Name" src="<?= $url; ?>"/>
<p>Name</p>
</div>
</div>
</div>
</div>
</div>
And my CSS :
.picture {
display: block;
opacity: 1;
}
.photoapropos{
display: block;
position: relative;
width: 425px;
height: 425px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.photoapropos:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.photoapropos .info {
position: absolute;
background: #FF8C00;
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
Can anyone help me because this feature seemed easy to realise but I don't see what i am missing ?
Thanks.

Answer 1

.picture {
display: block;
opacity: 1;
background:url('http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-4.jpg');
border-radius: 50%;
height: 425px;
width: 425px;
}
.photoapropos{
display: block;
position: relative;
width: 425px;
height: 425px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.photoapropos:hover .info{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.photoapropos .info {
position: absolute;
/*background: #FF8C00;*/
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
text-align: center;
background: rgba(82, 219, 235, 0.8);
color: #fff;
}
.photoapropos .info p {
margin-top: 50px;
}
<div class="row">
<div class="col-md-6">
<a class="picture" href="<?= $url; ?>">
<div class="photoapropos center-block">
<div class="info">
<p>Name</p>
</div>
</div>
</a>
</div>
</div>

Answer 2

You need to learn how to copy code. Haha!
Please change classes and other things. You can give credit to that site too.
The effect is coming from CSS scale.
.item {
width: 225px;
height: 225px;
margin: 15px auto;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.item .info {
position: absolute;
background: rgba(82, 219, 235, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.about-img-1 {
background-image: url(https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG);
}
.visible-xs {
display: none!important;
}
.img-circle {
border-radius: 50%;
}
.item .info h3 {
color: #f4f5f7;
font-size: 24px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 120px;
}
.item .info p {
color: #f4f5f7;
color: rgba(244, 245, 247, 0.8);
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 14px;
border-top: 1px solid rgba(244, 245, 247, 0.5);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0.4s;
-moz-transition: all 0.4s ease-in-out 0.4s;
-o-transition: all 0.4s ease-in-out 0.4s;
-ms-transition: all 0.4s ease-in-out 0.4s;
transition: all 0.4s ease-in-out 0.4s;
}
.item .info .list-inline {
font-size: 18px;
}
.item .info ul {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0.4s;
-moz-transition: all 0.4s ease-in-out 0.4s;
-o-transition: all 0.4s ease-in-out 0.4s;
-ms-transition: all 0.4s ease-in-out 0.4s;
transition: all 0.4s ease-in-out 0.4s;
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.item:hover {
box-shadow: none;
}
.item:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.item:hover .info ul {
opacity: 1;
}
<div class="item about-img-1">
<div class="info">
<!-- Mobile Fallback Image -->
<img class="img-responsive img-circle visible-xs" src="https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG" alt="">
<!-- Name / Position / Social Links -->
<h3>Kalpesh Singh</h3>
<p>KnowKalpesh.in</p>
<ul class="list-inline">
<li><a class="light-text" href="#"><i class="fa fa-facebook fa-fw"></i></a>
</li>
<li><a class="light-text" href="#"><i class="fa fa-linkedin fa-fw"></i></a>
</li>
<li><a class="light-text" href="#"><i class="fa fa-twitter fa-fw"></i></a>
</li>
</ul>
</div>
</div>

Answer 3

The hover part use box-shadow and scale transform property with CSS transitions.
Here's the result with the website example code and the relevant CSS part.
.item {
width: 225px;
height: 225px;
margin: 15px auto;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.item {
margin: 30px;
}
.about-img-1 {
background-image: url(http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-1.jpg);
}
.img-circle {
border-radius: 50%;
}
.item>a>img, .item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
display: block;
max-width: 100%;
height: auto;
}
img {
-webkit-backface-visibility: hidden;
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.item .info h3 {
color: #f4f5f7;
font-size: 24px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 120px;
}
.item .info {
position: absolute;
background: rgba(82, 219, 235, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.item:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.item:hover {
box-shadow: none;
}
Fiddle

Answer 4

Here is an answer for you in Fiddle: https://jsfiddle.net/uhdtv3nv/
.wrapper {
width: 100%;
height: 100%;
background-color: blue;
}
.item {
width: 225px;
height: 225px;
margin: 15px auto;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-image: url('http://iconshow.me/media/images/ui/ios7-icons/png/512/person_1.png');
}
.item:hover {
box-shadow: none;
}
.item:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.info {
position: absolute;
background: rgba(82, 219, 235, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.item h3 {
padding: 80px 70px;
}
<div class="wrapper">
<div class="item about-img-1">
<div class="info">
<h3>Some text</h3>
</div>
</div>
</div>