Getting a black overlay with text when hovering over an image - javascript

I searched all over for this and I found a couple of solutions, but I cannot get this to work in my application. What I am trying to do is to get a black-overlay over an image when hovered over and then text to appear. Ideally I want the text to have a border that looks like a button.
I want this to work with my scale on hover as well. For some reason on my actual page, when hovering over an image, it does nothing but scale. It doesn't turn the parent div the gray color.
What am I doing wrong?
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
}
.home-img-block:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.home-img-block:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background: rgba(0,0,0,0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>


Hope this is what you want. Check this out. Added an overlay class for black overlay.
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});
* {
box-sizing: border-box;
}
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
float: left;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-block:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
border: 1px solid #fff;
padding: 5px;
text-align: center;
}
.home-img-block:hover:after {
opacity: 1;
}
.home-img-block img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-ms-transition: all 1s ease;
/* IE 9 */
-o-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
}
.home-img-block:hover img {
-webkit-transform: scale(1.25);
/* Safari and Chrome */
-moz-transform: scale(1.25);
/* Firefox */
-ms-transform: scale(1.25);
/* IE 9 */
-o-transform: scale(1.25);
/* Opera */
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND OUT" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3.jpg">
<div class="overlay"></div>
</div>
</div>


You are missing a few things in your css this is why you are not getting the desired affect that you are looking for. You needed to add position relative to the .home-img-block class and then some of your stuff was just placed wrong giving a wierd shaking thing when hovering over it.
Here is a link to jsfiddle so you can mess around with it :
https://jsfiddle.net/kriscoulson/y32ekgdm/
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; Safari and Chrome
-moz-transition: all 1s ease; Firefox
-ms-transition: all 1s ease; IE 9
-o-transition: all 1s ease; Opera
transition: all 1s ease;
}
.home-img-block:hover img{
transform:scale(1.25);
background: rgba(0,0,0,0.3);
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}


It seems like an issue with the css. Mainly at these points:
home-img-block:hover img
and
.home-img-block img
Since, .home-img-block is wrapping the HTML. You dont have to be specific. And plus the first CSS line for hover set seems to be wrong. I have forked the code to a fiddle.
https://jsfiddle.net/kuape5np/
Could you confirm, is that you wanted?


Check this out I hope you are looking for same
.home-img-block {
width: 33.33%;
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
width: 100%;
}
.home-img-block:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background: rgba(0,0,0,0.3);
max-height: 100%;
}
.home-img-block:after {
background: rgba(0,0,0,.5);
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.hover {
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.hover h2 {
color:#fff;
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.home-img-block:hover:after,.home-img-block:hover .hover, .home-img-block:hover .hover h2 {
opacity: 1;
}
<div id="home-img-blocks">
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="hover">
<h2>FIND OUT MORE</h2>
</div>
</div>
</div>

Related

Cross-Browser 3D Animation

I'm currently trying to develop a small browser-based game. I've been fiddling around quite a bit with getting an animation to work the way I want it to.
The problem is that it works alright in Opera, quite well in Edge (although it crops the circle a bit). However, as always, IE fails quite a bit.
The example doesn't show the function perfectly, even though it normally works in my browser (Opera).
The card should flip from its absolute position, expand to 90% height AND move to complete center of the screen. There will be more cards with absolute positions and therefore it would be ideal to only have one "move" animation to center.
Thank you
$(document).ready(function() {
$(document).on("click", ".card", function() {
$(this).addClass("flipover");
$(this).removeClass('hover');
});
//if (window.document.documentMode) { alert("Use another browser!"); }
});
html,
body {
perspective: 1000px;
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.card {
position: absolute;
width: 10vh;
height: 10vh;
border-radius: 50%;
perspective: 1000px;
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cardfront,
.cardback {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
border-radius: 50%;
}
.cardfront {
transform: rotateY(0deg);
background: red;
}
.cardback {
transform: rotateY(180deg);
background: blue;
}
.hover:hover {
transform: rotate3d(1, 1, 0, 45deg);
transition: all 0.3s ease-in-out 0s;
}
.flipover {
position: absolute !important;
height: 90vh;
width: 90vh;
top: 50%;
left: 50%;
transform: rotateY(180deg);
margin-left: -45vh;
margin-top: -45vh;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pos1r {
top: 50%;
margin-top: -5vh;
left: 50vh;
}
.pos2r {
top: 35vh;
left: 35vh;
}
.pos3r {
top: 55vh;
left: 35vh;
}
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<div class="card pos1r hover">
<div class="cardfront">
</div>
<div class="cardback">
</div>
</div>
https://jsfiddle.net/dumo6r04/

I'm not sure if this is more or less what you were attempting to do - I applied the transform-origin and used translate3D to help move the card centrally.
$( document ).ready(function() {
$(document).on("click", ".card", function() {
$(this).addClass("flipover");
$(this).removeClass('hover');
});
});
html, body {
perspective: 1000px;
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.card
{
position: absolute;
width: 10vh;
height: 10vh;
border-radius: 50%;
perspective: 1000px;
transform-style: preserve-3d;
transform-origin:center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cardfront,
.cardback {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
border-radius: 50%;
transform-origin:center;
}
.cardfront {
transform: rotateY(0deg);
background: red;
}
.cardback {
transform: rotateY(180deg);
background: blue;
}
.hover:hover {
transform: rotate3d(1, 1, 0, 45deg);
transition: all 0.3s ease-in-out 0s;
}
.flipover {
position: absolute !important;
height: 90vh;
width: 90vh;
top: 50%;
left: 50%;
transform: rotateY(180deg) translate3D(-35%,-45%,0);
margin-left: -45vh;
margin-top: -45vh;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pos1r {
top: 50%;
margin-top: -5vh;
left: 50vh;
}
.pos2r {
top: 35vh;
left: 35vh;
}
.pos3r {
top: 55vh;
left: 35vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card pos1r hover">
<div class="cardfront"></div>
<div class="cardback"></div>
</div>

CSS link in overlay taking over a div

I have a <div> that contains a link.
At the bottom right corner of this <div>, I have an overlay element which takes over the whole <div> when hovered.
This overlay element also contains a link.
My problem is that the link in the overlying element is not clickable.
The problem is because I use pointer-events: none; on class .overlay-content, but if I don't use it, both links become dead.
Please see code here:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover~.overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Also, here is fiddle.
Is there any way that I can achieve this?

can't believe I actually found a pure CSS solution without any drawbacks.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap:hover .amg-corner-button_wrap {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
pointer-events: auto;
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class="wrap">
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
</div> <!-- panel body -->
</div> <!-- panel default -->
JSFiddle
Instead of listening to the :hover event on the corner-button, listen to it on a parent element. Since the :hover will be dispatched regardless of the mouse interaction of the elements' children, it is possible to set pointer-events: auto to the children containing links (overlay-content), once the corner-button has been hovered. Now, that the overlay-content is hoverable and since it's a child of the wrapping div, it will cause the :hover to stay active over the whole wrapping div.

I would recommend using JS style swapping instead of CSS pointer events for this problem. You need to trigger one change to your css when you mouse over the bottom corner, and a separate event when you mouse out of the container. I do not believe CSS gives you that kind of conditional control.

Here is half a solution using animations instead of transitions. This works for when you hover on to the amg-corner-button_wrap but not when you move off it. I'm a bit new to animations so hopefully someone here who knows more maybe able to help you with the second half.
There is also a weird visual in here if you hover on the amg-corner-button_wrap and hover off mid transition. The reason for this is that I added a background color to overlay-content so when it's fading in and you mouse off amg-corner-button_wrap the swipe starts to reverse before the fade is complete.
Anyway, hope this 50% solution helps you or others drive this to 100%! Have to run to a meeting, good luck :-)
#keyframes example {
0% {
visibility: hidden;
opacity: 0;
}
1% {
visibility: visible;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 200px;
width: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -120px;
bottom: -120px;
width: 200px;
height: 200px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.overlay-content {
visibility: hidden;
opacity: 0;
background-color: #e8c63d;
bottom: 0;
color: #333;
left: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
animation-name: example;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-delay: 0.3s;
animation-fill-mode: both;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->

Here's a working fiddle for a css and html only change: https://jsfiddle.net/y2auh7gn/4/.
It separates the link from overlay-content and places it where it's supposed to be with position: absolute. We need to move the link out of overlay-content so that when we hover over it the overlay doesn't disappear.
There's a side-effect where the link pops out with the corner piece.

Zoom effect on hover with image opacity

JSFIDDLE DEMO
I got this working for image zoom in with link on the entire div but without the opacity. The moment I add this code in line 14-16, it ceases to work for obvious reason:
background-color: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
HTML
<div class="zoom-group">
<a class="zoom-link" href="#" >
<div class="zoom-block">
<img src="http://placehold.it/250x250" />
<div class="zoom-text">
Hello
</div>
</div>
</a>
</div>
CSS:
.zoom-group{
overflow:hidden;
border: 1px solid #000000;
display: block;
position: relative;
text-align: center;
height: 250px;
width: 250px;
}
.zoom-text {
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
}
.zoom-block img{
max-width: 100%;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.zoom-link {
display: block;
}
.zoom-block img:hover{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
How should I make this work? I do need the opacity layer and the zoom-in functionality plus the entire div to be clickable.

The img:hover cannot happen cause of the overlaying DIV.
Target the overall parent instead and than traverse to the image:
Simply change your last statement from .zoom-block img:hover{ to .zoom-group:hover img{
.zoom-group{
overflow:hidden;
border: 1px solid #000000;
display: block;
position: relative;
text-align: center;
height: 250px;
width: 250px;
}
.zoom-text {
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
}
.zoom-block img{
max-width: 100%;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.zoom-link {
display: block;
}
.zoom-group:hover img{ /**/
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div class="zoom-group">
<a class="zoom-link" href="#" >
<div class="zoom-block">
<img src="http://placehold.it/250x250" />
<div class="zoom-text">
Hello
</div>
</div>
</a>
</div>

CSS transition on transparent images

I have three images (transparent pngs)
which are stacked using following html/css
<div style="position: relative; left: 0; top: 0;">
<img src="img/main.png" style="position: absolute; top: 0; left: 0;" />
<img src="img/middle.png" style="position: absolute; top: 0; left: 0;"/>
<img src="img/center.png" style="position: absolute; top: 0; left: 0;"/>
</div>
to get this:
I want to add hover effect on each of these images(zoom in, border, opacity etc).
A normal CSS for a zoom in on hover would be:
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
which doesn't work in this case because the hover effect gets applied to the whole image not just the image part (images have transparent background).
My question is, is it possible to style transparent images with CSS that are of irregular shapes?
jsfiddle here: http://jsfiddle.net/h4mxysw5/
Edit:
There seems to be a confusion. I do not want to zoom all three images at once.
For example - when hovered over the center image, I want just the center image to zoom (not all).
Updated jsfiddle with border: http://jsfiddle.net/h4mxysw5/4/

Two things you have to do.
Crop you images to fit only the space need by them, not the whole container size so they don't overlap each other.
Remove the :hover from the div and add a :hover behaviour to each image by using the img selector.
Here's the example:
div {
margin: 50px; /* Just for demo purposes */
}
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div style="position: relative; left: 0; top: 0;">
<img class="one" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" />
<img class="two" src="http://i.imgur.com/iEwbExs.png" style="position: absolute; top: 76px; left: 72px;"/>
<img class="three" src="http://i.imgur.com/hdwFlUv.png" style="position: absolute; top: 102px; left: 100px;"/>
</div>
Update
Check what you can do with SVGs:
path {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
transform-origin: center center;
}
path:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<svg width="400px" height="400px">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M140.5,178 C161.210678,178 178,161.210678 178,140.5 C178,119.789322 161.210678,103 140.5,103 C119.789322,103 103,119.789322 103,140.5 C103,161.210678 119.789322,178 140.5,178 Z M141,158 C150.388841,158 158,150.388841 158,141 C158,131.611159 150.388841,124 141,124 C131.611159,124 124,131.611159 124,141 C124,150.388841 131.611159,158 141,158 Z" fill="#4BA1DF"></path>
<path d="M140,205 C175.898509,205 205,175.898509 205,140 C205,104.101491 175.898509,75 140,75 C104.101491,75 75,104.101491 75,140 C75,175.898509 104.101491,205 140,205 Z M140,189 C167.061953,189 189,167.061953 189,140 C189,112.938047 167.061953,91 140,91 C112.938047,91 91,112.938047 91,140 C91,167.061953 112.938047,189 140,189 Z" fill="#4BA1DF"></path>
<path d="M140,280 C217.319865,280 280,217.319865 280,140 C280,62.680135 217.319865,0 140,0 C62.680135,0 0,62.680135 0,140 C0,217.319865 62.680135,280 140,280 L140,280 Z M140.5,226 C187.720346,226 226,187.720346 226,140.5 C226,93.2796539 187.720346,55 140.5,55 C93.2796539,55 55,93.2796539 55,140.5 C55,187.720346 93.2796539,226 140.5,226 L140.5,226 Z" fill="#4BA1DF"></path>
</g>
</svg>

The main issue here is that all of the images you have used are the same size - So because they are sitting on top of each other, you will only ever be hovering over the top one. Just because the image is transparent it will still trigger :hover when you hover over any part of the image.
To demonstrate using your own CSS, this is how you could do it without images:
div > div {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
border:10px solid #f00;
border-radius:50%;
position: absolute;
}
.outer {
width:200px;
height:200px;
top: 25px;
left: 25px;
border:30px solid #f00;
}
.middle {
width:150px;
height:150px;
top: 60px;
left: 60px;
border:20px solid #f00;
}
.inner {
width:100px;
height:100px;
top: 95px;
left: 95px;
border:10px solid #f00;
}
div > div:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div style="position: relative; left: 0; top: 0;">
<div class="outer"></div><div class="middle"></div><div class="inner"></div>
</div>
And here, with a bit of tweaking you can use the same CSS but also using the images as "background-images" to give the effect you are trying to achieve.
div > div {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
border:1px solid #f00;
border-radius:50%;
position: absolute;
}
.outer {
width:280px;
height:280px;
top: 25px;
left: 25px;
background-image:url(http://i.stack.imgur.com/bFfbC.png);
}
.middle {
width:130px;
height:130px;
top: 100px;
left: 100px;
background-image:url(http://i.stack.imgur.com/Eewcq.png);
background-position:center;
}
.inner {
width:75px;
height:75px;
top: 125px;
left: 125px;
background-image:url(http://i.stack.imgur.com/VXk7A.png);
background-position:center;
}
div > div:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div style="position: relative; left: 0; top: 0;">
<div class="outer"></div>
<div class="middle"></div>
<div class="inner"></div>
</div>

Out of sheer curiosity if it could be done I just needed to create a CSS only version. While it doesn't use the images as the OP required, I still think, as an alternative to img and/or JS, the result is worth posting.
In the snippet you will see both an unshaded and shaded version. Please do give your comments...
(btw: tested in FF DE 44+, Chrome 46+ and IE11+ on W7)
html, body { box-sizing: border-box;
height: 100%; width: 100%; background-color: #f9f7f1;
margin: 0px; padding: 0px; border: 0px;
cursor: default }
*, *:before,
*:after { box-sizing: inherit }
.donut-button { position: relative;
width: 280px;
height: 280px;
margin: 100px auto;
cursor: pointer }
.r-outer { width: 100%; height: 100%; border-width: 55px; top: 0.0%; left: 0.0% }
.r-middle { width: 50%; height: 50%; border-width: 15px; top: 25.0%; left: 25.0% }
.r-center { width: 25%; height: 25%; border-width: 20px; top: 37.5%; left: 37.5% }
.ring { position: absolute;
border-color : hsl(205, 69%, 58%);
border-style : solid;
border-radius: 50%;
transition: all 50ms }
.ring:hover { transform: scale(1.10) }
.ring:active { transform: scale(0.95) }
/* demo extras, shadow and color manipulation during hover */
[btn] { box-shadow: inset 0 0 1px hsla(205, 69%,48%, 1), /* hide white overflow (quirk) */
inset 10px 10px 10px hsla(205, 69%, 8%,.3), /* inset shadow */
0 0 1px hsla(205, 69%,58%, 1), /* hide white overflow (ditto) */
20px 20px 10px hsla(205, 69%, 8%,.4), /* inner outside shadow */
0 0 1px hsla(205, 69%, 8%,.3) } /* outer outside shadow */
[btn]:hover { border-color: hsl(205, 69%, 62%);
box-shadow: inset 10px 10px 10px hsla(205, 69%, 8%,.4),
20px 20px 10px hsla(205, 69%, 8%,.3) }
[btn]:active { border-color: hsl(205, 69%, 54%);
box-shadow: inset 8px 8px 8px hsla(205, 69%, 8%,.5),
10px 10px 10px hsla(205, 69%, 8%,.4) }
<div id="donut-1" class="donut-button">
<div class="ring r-outer"></div>
<div class="ring r-middle"></div>
<div class="ring r-center"></div>
</div>
<div id="donut-2" class="donut-button">
<div btn class="ring r-outer"></div>
<div btn class="ring r-middle"></div>
<div btn class="ring r-center"></div>
</div>

With JavaScript, you can hard-code the hovering areas as follows:
JavaScript
function animateCircles(obj) {
var x = window.event.x - obj.offsetLeft;
var y = window.event.y - obj.offsetTop;
var img1 = document.getElementById('1');
var img2 = document.getElementById('2');
var img3 = document.getElementById('3');
var centerR = 45;
var middleR = 75;
if (x >= img3.offsetLeft + (img3.offsetWidth / 2 - centerR) &&
x <= img3.offsetLeft + (img3.offsetWidth / 2 + centerR) &&
y >= img3.offsetTop + (img3.offsetHeight / 2 - centerR) &&
y <= img3.offsetTop + (img3.offsetHeight / 2 + centerR))
img3.className += " onhover";
else
img3.className = "normal";
if (x >= img2.offsetLeft + (img2.offsetWidth / 2 - middleR) &&
x <= img2.offsetLeft + (img2.offsetWidth / 2 + middleR) &&
y >= img2.offsetTop + (img2.offsetHeight / 2 - middleR) &&
y <= img2.offsetTop + (img2.offsetHeight / 2 + middleR))
img2.className += " onhover";
else
img2.className = "normal";
if (x >= img1.offsetLeft &&
x <= img1.offsetLeft + img1.offsetWidth &&
y >= img1.offsetTop &&
y <= img1.offsetTop + img1.offsetHeight)
img1.className += " onhover";
else
img1.className = "normal";
}
Where you specify the size of the hover 'squares' (center of the images from which the hovering should take place) with the variables centerR and middleR. Note that you can also improve this code to enlarge the hovering area as the images grow as well, such that the images only shrink when you hover outside of the enlarged image. Note that I've soft-coded all the widths and heights of the images on purpose: this allows for greater flexibility if you ever decide to change the pictures.
With the following HTML:
<div style="position: relative; left: 0; top: 0;">
<img id="1" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
<img id="2" src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
<img id="3" src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
</div>
and CSS:
.normal {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.onhover {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
This yields the following result:
> DEMO

Try Pixel Selection: a JQuery library that can handle transparency in hovering.
$(function() {
$('img').Pixelselect({
over: function(e, obj, hit) {
if (hit) {
obj.addClass('hover');
} else {
obj.removeClass('hover');
}
e.preventDefault();
},
out: function(e, obj) {
obj.removeClass('hover');
e.preventDefault();
},
sublayers: true
})
})
img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-ms-transition: all 1s ease;
/* IE 9 */
-o-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
opacity: 1;
}
img.hover {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative; left: 0; top: 0;">
<img src="http://i.stack.imgur.com/80Jxj.png" style="position: absolute; top: 0; left: 0;" />
<img src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" />
<img src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" />
</div>
(This won't work create with scaling the image, as the hover area will change, also the images need to be on the same domain)

Demo
I have used z-index for three div's and each div has background-image
/*Largest Circle*/ Div1=z-index:1
/*second Circle*/ Div1=z-index:2
/*Middle Small Circle*/ Div1=z-index:3
z-index is basically is used to stack it so Middle Circle is at top,second circle is in between Largest Circle and Middle Small Circle, Largest Circle is at last this does not influence mouse hover on other circle, since all circle is larger then circle above from it(in z-index) so they are visible and hoverable. Div id allImg is used to set align, size since all children div to allImg have width,height in percentage they will automatically resize
/*Outer Div use for alignment and to set size*/
#allImg{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
top:100px;
}
/*Styling appling to all desendant div inside allImg*/
#allImg > div{
position:absolute;
padding: 0px;
-webkit-transition: all 1s ease;/* Safari and Chrome */
-moz-transition: all 1s ease;/* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease;/* Opera */
transition: all 1s ease;
position: absolute;
padding: 0px;
transition: all 1s ease 0s;
border: 1px solid #000;
border-radius: 100px;
}
/*Div with smallest z-index i.e outer circle*/
#img1{
background-image: url('http://i.stack.imgur.com/GWShR.png');
background-size: 100% 100%;
width: 100%;
height: 100%;
z-index: 1;
}
#img1:hover{
-moz-transform: scale(1.25);/* Firefox */
-webkit-transform:scale(1.25); /* Safari and Chrome */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
/*Div with greater z-index then Outer circle i.e 2nd circle*/
#img2{
background-image: url("http://i.stack.imgur.com/eWisy.png");
background-size: 100% 100%;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index:2;
}
#img2:hover{
-moz-transform: scale(1.16);/* Firefox */
-webkit-transform:scale(1.16); /* Safari and Chrome */
-ms-transform:scale(1.16); /* IE 9 */
-o-transform:scale(1.16); /* Opera */
transform:scale(1.16);
}
/*Div with greatest z-index i.e middle circle*/
#img3{
background-image: url("http://i.stack.imgur.com/VjygS.png");
background-size: 100% 100%;
width: 30%;
height: 30%;
left: 35%;
top: 35%;
z-index:3;
}
#img3:hover{
-moz-transform: scale(1.13);/* Firefox */
-webkit-transform:scale(1.13); /* Safari and Chrome */
-ms-transform:scale(1.13); /* IE 9 */
-o-transform:scale(1.13); /* Opera */
transform:scale(1.13);
}
<div id="allImg">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
Also Note that you need to Crop image it to actual size as said by #Dave Gomez

I think you need =>
JSFiddle demo :)
div:hover > img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}

One solution possible could be :
(using The HTML map element)
var vi = function(el) {
var imgEl = document.getElementById(el.getAttribute('data-img'));
if(imgEl) imgEl.classList.add('effectOn');
}
var vo = function(el) {
var imgEl = document.getElementById(el.getAttribute('data-img'));
if(imgEl) imgEl.classList.remove('effectOn');
}
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img.effectOn {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div style="position: relative; left: 0; top: 0;">
<img id='main' src="http://i.stack.imgur.com/80Jxj.png" style="position: absolute; top: 0; left: 0;" usemap='#main' />
<img id='middle' src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" usemap='#main'/>
<img id='center' src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" usemap='#main'/>
<map id="main">
<area shape="circle" onmouseover='vi(this)' onmouseout='vo(this)' data-img='center' coords="147,147,58" />
<area shape="circle" onmouseover='vi(this)' onmouseout='vo(this)' data-img='middle' coords="147,147,90" />
<area shape="circle" onmouseover='vi(this)' onmouseout='vo(this)' data-img='main' coords="147,147,147" />
</map>
</div>
You can use this way on any kind of forms, rect, triangle, poly ...
The most difficult is to delimit the map, but there is various software that can help you with that (GIMP do that).

As said in the comment just one image and the other 2 only with html/css.
Here the fiddle, hope the effect you need is this :)
https://jsfiddle.net/keypaul/8dr25184/
HTML
<div id="wrap">
<div></div>
<div></div>
<img src="http://i.stack.imgur.com/bFfbC.png" alt="" />
</div>
CSS
#wrap {
position:relative;
width:280px;
height:280px;
}
#wrap img{
position:relative;
max-width:100%;
height:auto;
top:0;
left:0;
z-index:1;
transform: scale(1);
transition: 0.4s;
}
#wrap img:hover {
transform:scale(1.25);
}
#wrap div:nth-child(1){
background: transparent;
border: 15px solid red;
border-radius: 100px;
height: 99px;
left: 75px;
overflow: hidden;
position: absolute;
top: 77px;
width: 99px;
z-index: 2;
transform: scale(1);
transition: 0.4s;
}
#wrap div:hover:nth-child(1){
transform: scale(1.5);
}
#wrap div:nth-child(2){
background: transparent;
border: 20px solid red;
border-radius: 40px;
height: 34px;
left: 103px;
overflow: hidden;
position: absolute;
top: 105px;
width: 34px;
z-index: 3;
transform: scale(1);
transition: 0.4s;
}
#wrap div:hover:nth-child(2){
transform: scale(1.5);
}
You need only to delete inner little circle from the big png, change color of internal donuts and add vendor prefix in the css.

CSS transition to bottom-right from center

I have a requirement in which the container is stretching all over the page. when I click on the container, it should become smaller.
This should happen with animation. I tried css transition which is animating the stretched element to top:
shrinking slowly to the provided dimensions while moving towards top-right
but what I want is
Shrink in middle and then move to bottom-right of the page by animating.
Fiddle
CSS
#main {
position: fixed;
height: 100%;
width: 100%;
margin-top: 50px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
How should I do this?

You can try combining both transition and animation. Even you can use only animation here:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-animation: to-bottom-right 0.5s 0.5s forwards;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
#-webkit-keyframes to-bottom-right {
100% {
left: 100%;
top: 100%;
margin-left:-100px;
margin-top:-50px;
}
}
Please test the demo using webkit-based browsers, you can add prefixes yourself for other browsers. Note that the animation will run after the transition has been done, so we have to use animation-delay.
Demo.
The demo above uses negative margins to center the div, its advantage is well supported but we have to change the negative margins' values when changing the size of the div. Another way is using translate transform, this will center the div greatly but it requires browsers to support transform feature. Here is the demo using translate instead to center the div Demo 2.
Here is another solution using only animation, the transition is just used for animating the color changing.
Demo 3.
UPDATE: All the demos above work perfectly for browsers supporting animation feature. However it's a pity that IE9 does not support this feature. I've tried using some workaround and I've found a solution by using multi-transition. The first transition lasts for 0.5s while the second transition will start after 0.5s. To animate the div from center to bottom-right corner, you have to use transition for the translate transform. Here is the code it should be:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
-webkit-transform:translate(50vw , 50vh) translate(-50%,-50%);
-ms-transform:translate(50vw , 50vh) translate(-50%,-50%);
-moz-transform:translate(50vw , 50vh) translate(-50%,-50%);
transform:translate(50vw , 50vh) translate(-50%,-50%);
-webkit-transition: all 0.5s ease, -webkit-transform 0.5s 0.5s ease;
-ms-transition: all 0.5s ease, -ms-transform 0.5s 0.5s ease;
-moz-transition: all 0.5s ease, -moz-transform 0.5s 0.5s ease;
transition: all 0.5s ease, transform 0.5s 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
Updated Demo.

Do you mean like this: fiddle
Here's what I changed:
#main {
position: absolute;
bottom: 0;
right: 0;
height: calc(100% - 100px);
width: 100%;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
I set the position to absolute and the bottom and right properties to 0. Since the element is not in the document flow any more, I used calc to move set the element 100px smaller than the height.

Well i tried
http://jsfiddle.net/tyuAk/15/
in jquery tho
$("#click").hover(
function() {
setTimeout( '$("#main").delay(500).attr("id","newclass");' ,500 );
});
#main {
position: absolute;
height: 100%;
width: 100%;
background-color: red;
}
#newclass {
position: absolute;
height: 50px;
width: 100px;
margin-top:25%;
background-color: green;
}
#click:hover + #main {
width: 100px;
height: 50px;
margin-top:25%;
background-color: green;
transition-property:width,height,margin;
transition: 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
#click:hover + #newclass {
margin-top:0px;
transition: all 0.5s ease;
}

Categories