So, I have an icon, a circle icon, I want to make this icon when it hovered it will has coin flip transform, just like https://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html but it flip two times so it goes back to the first position.
This is the HTML code:
<div class="bg">
<div class="icon">
<img src="football.png">
</div>
</div>
This is the CSS code:
.bg {
padding: 6px 6px;
float: left;
width: 20%;
}
.icon {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
box-shadow: 3px 3px 10px black;
border: 0px;
background-color: white;
margin-left: auto;
margin-right: auto;
display: block;
}
.icon img{
left: 50%;
top: 50%;
height: 100%;
width: auto;
}
.icon:hover {
transform: translateX( -1px ) rotateY( 180deg );
}
so the transform is not soft like the example from the link, and when the first flip (or rotation) I want to change the icon with different image, but when the second rotate it will back to first image. Any suggestion? thanks before
You forgot to add the animation itself, the transition.
.bg {
padding: 6px 6px;
float: left;
width: 20%;
}
.icon {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
box-shadow: 3px 3px 10px black;
border: 0px;
background-color: white;
margin-left: auto;
margin-right: auto;
display: block;
/* TRANSITION HERE!! */
-webkit-transition: transform 1s ease;
-moz-transition: transform 1s ease;
-ms-transition: transform 1s ease;
-o-transition: transform 1s ease;
transition: transform 1s ease;
/* END OF TRANSITION */
}
.icon img{
left: 50%;
top: 50%;
height: 100%;
width: auto;
}
.icon:hover {
transform: translateX( -1px ) rotateY( 180deg ); /* ALSO EXTRA TRANSFORM PROPERTIES ADDED FOR COMPATIBILITY*/
-ms-transform: translateX( -1px ) rotateY(180deg); /* IE 9 */
-webkit-transform: translateX( -1px ) rotateY(180deg); /* Chrome, Safari, Opera */
}
<div class="bg">
<div class="icon">
<img src="https://i.stack.imgur.com/RVjde.jpg">
</div>
</div>
I hope this helped.
Cheers!
You can define an animation the following:
#keyframes flip_animation {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
And add this animation you your CSS-Class
.icon:hover {
animation-name: flip_animation;
animation-duration: 1s;
}
See this link for more information about animations in CSS.
Related
I want a picture to slide (with keyframes), and wen :hover that its scale grows, and when :active, decrease its scale. When i do so, it only slides, :hover and :active don´t work... Please help
#slide-right {
margin-left: 25px;
margin-right: 25px;
margin-bottom: 25px;
height: 250px;
box-shadow: 0px 1px 5px grey;
border-radius: 10px;
transition: .5s;
animation: slide-right 1s ease-out both;
}
#slide-right:hover {
transition: .5s;
transform: scale(1.04);
}
#slide-right:active {
transition: .2s;
transform: scale(0.95);
}
#keyframes slide-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(+200px);
}
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg" id="slide-right">
#slide-right {
position: relative;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 25px;
height: 250px;
box-shadow: 0px 1px 5px grey;
border-radius: 10px;
transition: .5s;
animation: slide-right 1s ease-out forwards;
}
#keyframes slide-right{
0% {
left: 0px;
}
100% {
left: 200px;
}
}
#slide-right:hover {
transition: .5s;
transform: scale(1.04);
}
#slide-right:active {
transition: .2s;
transform: scale(0.95);
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg" id="slide-right">
It is happening because your key-frames animation is using css transform property and css for hover also uses transform to scale the image. So, only one of it will work at a time.
As a workaround for this problem, you can animate the entry of image using position.
Add position:relative to #slide-right and update your key-frames to 0%{left:0} and 100%{left:200px}.
For working example, please refer : this
I have a code to make flip to a div. It's working fine in Firefox and Chrome, but in IE when the card flips, it shows the front side upside down instead of show the back side.
This is the code:
body {
background: #eee;
}
.card{
width: 300px;
height: 300px;
}
.content {
width: 300px;
height: 300px;
perspective: 500px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
transform: rotateX( 180deg ) ;
transition: transform 0.5s;
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.back {
background: #03446A;
color: white;
transform: rotateX( 180deg );
}
<div class="card">
<div class="content">
<div class="front">
Front
</div>
<div class="back">
Back!
</div>
</div>
</div>
As Shaggy commented, IE doesn't support preserve-3d. It also lacks support for backface-visibility: hidden;
So,you can not rotate the container, you have to rotate the elements individually.
And you need to adjust the visibility (with half the transition time, you want it to happen in the middle of the rotation.
This is the result, working ok on modern browsers and also on IE
body {
background: #eee;
}
.card{
width: 300px;
height: 300px;
}
.content {
width: 300px;
height: 300px;
perspective: 500px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.front {
transition: visibility 0.5s, transform 1s;
}
.card:hover .front {
visibility: hidden;
transform: rotateX(180deg);
}
.back {
background: #03446A;
color: white;
transform: rotateX( -180deg );
transition: visibility 0.5s, transform 1s;
}
.card:hover .back {
transform: rotateX(0deg);
}
<div class="card">
<div class="content">
<div class="front">
Front
</div>
<div class="back">
Back!
</div>
</div>
</div>
This is how I want to scale my images, smoothly without any jumps.
My attempt does not work like in the gallery above, the image (red square in my case) jumps, my code:
section {
background-color: rgba(0, 0, 0, 0.701961);
width: 400px;
height: 400px;
}
div {
position: absolute;
top: 120px;
left: 120px;
width: 160px;
height: 160px;
background-color: red;
-webkit-transition: all .2s ease-in-out;
}
div:hover {
-webkit-transform: scale(1.8);
}
<section>
<div></div>
</section>
How to fix this? The red square jumps. Is it possible to scale smoothly with CSS Transition at all like in the gallery in the link at the beginning?
What do you mean by "jumps"? Try this, jumps too?
section {
background-color: rgba(0, 0, 0, 0.701961);
width: 400px;
height: 400px;
}
div {
position: absolute;
top: 120px;
left: 120px;
width: 160px;
height: 160px;
background-color: red;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
div:hover {
-webkit-transform: scale(1.8) rotate(0.01deg);
transform: scale(1.8) rotate(0.01deg);
}
<section>
<div></div>
</section>
Also, you could try the variant with a container for an image (like in the first link of your question).
JSFiddle
.banner {
position: relative;
z-index: 1;
cursor: pointer;
border: 1px solid #dfe2e5;
background: #000;
width: 310px;
height: 150px;
-webkit-transition: border-color 0.1s;
transition: border-color 0.1s;
overflow: hidden;
}
.banner:hover {
border-color: #bdc1c5;
}
.banner__image-container {
overflow: hidden;
height: 100%;
}
.banner__image {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.banner:hover .banner__image {
-webkit-transform: scale(1.15) rotate(0.01deg);
transform: scale(1.15) rotate(0.01deg);
opacity: 0.5;
}
<div class="banner">
<div class="banner__image-container">
<img class="banner__image" src="https://picsum.photos/310/150/?image=1022"/>
</div>
</div>
I sometimes solve strange jumps on transition by adding rotate(0.01deg) on the transform property, like so:
.element:hover {
transform: scale(1.5) rotate(0.01deg);
}
I am trying to place an image at the center of each of the following four divs.I have tried placing the image as a background and it covers it but due to the border radius it doesn't look quite right. I have included a fiddle for reference.
HTML:
<div id="gold" class="divSquare">1</div>
<div id="lblue" class="divSquare">2</div>
<div style='clear:both'></div>
<div id="redb" class="divSquare">3</div>
<div id="dblue" class="divSquare">4</div>
CSS:
#gold{
background-color:#F3B500;
border-radius: 100px 100px 5px 100px;
transition: all .2s ease-in-out; }
#gold:hover{
opacity: 0.8;
transform: scale(1.2);
border:none;
margin:8px;
}
#lblue{
background-color:#0E43C6;
transition: all .2s ease-in-out;
border-radius: 100px 100px 100px 5px; }
#lblue:hover{
opacity: 0.8;
transform: scale(1.2);
margin:8px;}
#redb{
background-color:#7E0202;
transition: all .2s ease-in-out;
border-radius: 100px 5px 100px 100px;
}
#redb:hover{
opacity: 0.5;
transform: scale(1.2);
margin:8px;}
#dblue{
background-color:#041871;
transition: all .2s ease-in-out;
border-radius: 5px 100px 100px 100px;
}
#dblue:hover{
opacity: 0.5;
transform: scale(1.2);
margin:8px;}
.divSquare{
width:100px; height:100px; margin:2px;float:left;
text-align: center;
vertical-align: middle;
line-height: 150px;}
http://jsfiddle.net/gerryboy/osaqnzoL/
You could center content in your divs using flexbox (if it's not a problem for your compatibility requirements):
.divSquare {
display: flex;
justify-content: center;
align-items: center;
}
See Fiddle
As per my understanding you want place the image using css property background-image on div and OnHover of div you want to increase the size of the div and the image also.
Please let Know if my understanding is right.
I'd be using a background image unless there's an absolute requirement tha the image be content.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 3em;
}
#gold {
background-color: #F3B500;
background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-2.jpg);
background-repeat: no-repeat;
background-position: center center;
border-radius: 100px 100px 5px 100px;
transition: all .2s ease-in-out;
transform-origin: bottom right;
}
#gold:hover {
opacity: 0.8;
transform: scale(1.2);
border: none;
}
#lblue {
background-color: #0E43C6;
transition: all .2s ease-in-out;
border-radius: 100px 100px 100px 5px;
transform-origin: bottom left;
}
#lblue:hover {
opacity: 0.8;
transform: scale(1.2);
}
#redb {
background-color: #7E0202;
transition: all .2s ease-in-out;
border-radius: 100px 5px 100px 100px;
transform-origin: top right;
}
#redb:hover {
opacity: 0.5;
transform: scale(1.2);
}
#dblue {
background-color: #041871;
transition: all .2s ease-in-out;
border-radius: 5px 100px 100px 100px;
transform-origin: top left;
}
#dblue:hover {
opacity: 0.5;
transform: scale(1.2);
}
.divSquare {
width: 100px;
height: 100px;
margin: 2px;
float: left;
text-align: center;
vertical-align: middle;
line-height: 100px;
color: white;
}
<div id="gold" class="divSquare">1</div>
<div id="lblue" class="divSquare">2</div>
<div style='clear:both'></div>
<div id="redb" class="divSquare">3</div>
<div id="dblue" class="divSquare">4</div>
Another solution is the position / margin top properties at 50% and an opposite transform: translateY of 50% for the vertical alignment.
position: relative;
top: 50%;
transform: tranlateY(-50%);
Here is a demo with some CSS enhancements.
This one is with images as background covering all the shapes. Needs tweaking, but can be achieved. don't forget to use the:
.divSquare{
overflow: hidden;
}
to mask out the bleeding of the images.
Created a LightBox effect using pure CSS and HTML, no JS. The image appears, but on the right side of the screen, halfway cut off, and partially underneath my Nav bar. Half of the screen is shaded behind the image.
It appears like it would work, aside from it being off-center and behind the navigation. From the code at hand, is there anything that appears it could be doing this? I'd be happy to post more code if necessary. Thank you!
/*Eliminates padding, centers the thumbnail */
body,
html {
padding: 0;
margin: 0;
text-align: center;
float: left;
}
/* Styles the thumbnail */
a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
margin: 94px 20px 20px 20px;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
clear: both;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
<div id="gravel-button">
<a class="lightbox" href="#gravel-1">
<h7>Photo & Info</h7>
</a>
</div>
<div class="lightbox-target" id="gravel-1">
<img src="http://www.sbsg.com/wp-content/uploads/2010/02/58minus.jpg">
<a class="lightbox-close"></a>
</div>