CSS Image hover show button

Hover on profile picture , upload or change profile picture option  will show.

by Using this user can show the profile picture and can upload the new image both from the same container. It looks good than older version.

Before upload , profile picture look like,

Stack of codes

On hover the Profile image, it will show a button. You can replace the button with input type file for select image. Below image is showing how it looks on hover profile picture.

For this the HTML Code is:

<div class="container">
    <img src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="title">card title</p>
    <div class="overlay"></div>
    <div class="button"><a href="#"> BUTTON </a></div>
</div>

CSS Code:

.container {
 position: relative;
 margin-top: 50px;
 width: 500px;
 height: 300px;
}

.overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0);
 transition: background 0.5s ease;
}

.container:hover .overlay {
 display: block;
 background: rgba(0, 0, 0, .3);
}

img {
 position: absolute;
 width: 500px;
 height: 300px;
 left: 0;
}

.title {
 position: absolute;
 width: 500px;
 left: 0;
 top: 120px;
 font-weight: 700;
 font-size: 30px;
 text-align: center;
 text-transform: uppercase;
 color: white;
 z-index: 1;
 transition: top .5s ease;
}

.container:hover .title {
 top: 90px;
}

.button {
 position: absolute;
 width: 500px;
 left:0;
 top: 180px;
 text-align: center;
 opacity: 0;
 transition: opacity .35s ease;
}

.button a {
 width: 200px;
 padding: 12px 48px;
 text-align: center;
 color: white;
 border: solid 2px white;
 z-index: 1;
}

.container:hover .button {
 opacity: 1;
}

source: https://codepen.io/philcheng/pen/YWyYwG

If you like please comment below, by this i can understand you are liking or i have to improve more.. so please comment below. – matrix.

Please follow and like us: