When I hover over the div, the .note span fades in. After it fades in, the font-weight seems to suddenly increase (it becomes bolder). I realize that in the fiddle there is no image, but it is not required to see my issue.
Html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
<title>Cool Effect</title>
</head>
<body>
<div class="imageHolder">
<img src="picture1.jpeg">
<span class="note">Hello!</span>
</div>
</body>
</html>
CSS:
.imageHolder {
position: relative;
top:300px;
left: 300px;
width: 300px;
height: 250px;
text-align: center;
overflow: hidden;
background-color: black;
}
.note {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid white;
padding: 8px;
color: white;
font-size: 24px;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
img {
width: 300;
opacity: 1;
height: 250px;
}
.imageHolder:hover .note {
opacity: 1;
}
Thanks.
Using a 3d transform (ie. using hardware acceleration) fixes lots of these rendering issues.
.note {
...
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
...
}
This is well documented
DEMO
Alternatively, this also seems to work for your example and may have better browser support...
.note {
...
-webkit-backface-visibility: hidden;
...
}
DEMO
Note these changes:
.note {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid white;
padding: 8px;
color: white;
font-size: 24px;
opacity: 0;
-webkit-transition: opacity 0.1s; <--
transition: opacity 0.1s; <--
}
Although the transition speed is slightly quicker this fixes the problem in the fiddle.
Related
It is my first question because I can't find solution for my easy problem (i guess). I don't know why my div is changing its position when it should rotate around itself. How can i resolve a problem of this type? I found some similar questions but about different location of their divs that don't point me to the answer.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 30px;
color: white;
background-color: #333;
overflow: hidden;
}
.square {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 400px;
background-color: gold;
border: 3px solid black;
animation: square 4s ease-in-out .5s infinite;
animation-direction: alternate;
transition: transform 2s;
}
#keyframes square {
from {
top: 20%;
background-color: aquamarine;
transform: rotate(0deg);
}
to {
top: 80%;
background-color: sandybrown;
transform: rotate(360deg);
}
}
<div class="square"></div>
You need to add 3 things:
1.) Add transform-origin: left top; to .square(because that "neutralizes your -50% top and left shifting)
2.+3.) Add translate(-50%, -50%) to the two keyframe stages to make the object stay at the original transform setting, otherwise transform will switch to the default 0/0 values
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 30px;
color: white;
background-color: #333;
overflow: hidden;
}
.square {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 400px;
background-color: gold;
border: 3px solid black;
animation: square 4s ease-in-out .5s infinite;
animation-direction: alternate;
transition: transform 2s;
transform-origin: left top;
}
#keyframes square {
from {
background-color: aquamarine;
transform: rotate(0deg) translate(-50%, -50%);
}
to {
background-color: sandybrown;
transform: rotate(360deg) translate(-50%, -50%);
}
}
<div class="square"></div>
To center your div you need to make use of the translate attributes:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 30px;
color: white;
background-color: #333;
overflow: hidden;
}
.square {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 400px;
background-color: gold;
border: 3px solid black;
animation: square 4s ease-in-out .5s infinite;
animation-direction: alternate;
transition: transform 2s;
}
#keyframes square {
from {
top: 20%;
background-color: aquamarine;
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
to {
top: 80%;
background-color: sandybrown;
transform: translateX(-50%) translateY(-50%) rotate(360deg);
}
}
<div class="square"></div>
I'm trying to do some animation in a div with css rotate() but apparently it only works when I check the label, when I check again just show standard display.
Will be a bonus if someone help me to position the div that I use #rotator before, after vertical, this way they show 45ยบ to a div.
Example: https://codepen.io/rafaart/pen/dyNjgeb
.ativar-dark{
width: 50px;
height: 50px;
display: none;
}
#sky {
background-color: black;
position: absolute;
overflow: hidden;
}
#rotator {
position: relative;
width: 7rem;
height: 7rem;
transform: rotate(-45);
border-radius: 50%;
border: 2px solid red;
margin: 3rem;
}
label{
cursor: pointer;
}
#rotator:before, #rotator:after {
position: absolute;
content: '';
display: block;
height: 3rem;
width: 3rem;
border-radius: 50%;
animation: inherit;
animation-direction: reverse;
}
#rotator:before {
background-color: yellow;
top: -.25rem;
left: -.25rem;
}
#rotator:after {
background-color: White;
bottom: -.25rem;
right: -.25rem;
}
.ativar-dark:checked ~ .container div{
transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
<label for="ativar-dark">
<div id="rotator">
</div>
</label>
</div>
I have made few tweaks to the code. Kindly check whether it satisfies your requirement.
Your input type contains the id and class of the same name. You mentioned .ativar-dark in the CSS but when I changed it to #ativar-dark it was working fine which is bit strange because id and class can have the same name.
.ativar-dark{
width: 50px;
height: 50px;
display: none;
}
#sky {
background-color: black;
position: absolute;
overflow: hidden;
}
#rotator {
position: relative;
width: 7rem;
height: 7rem;
border-radius: 50%;
border: 2px solid red;
margin: 3rem;
transform: rotate(0deg); /*enter 0 deg in order to return back to the original position when unchecked */
transition: all ease 2s; /* This will make sure it provides the animated effect when unchecked */
}
label{
cursor: pointer;
}
#rotator:before, #rotator:after {
position: absolute;
content: '';
display: block;
height: 3rem;
width: 3rem;
border-radius: 50%;
animation: inherit;
animation-direction: reverse;
}
#rotator:before {
background-color: yellow;
top: 2rem; /* Move the position of circle to center position */
left: -1.25rem;
}
#rotator:after {
background-color: White;
bottom: 2rem; /* Move the position of circle to center position */
right: -1.25rem;
}
#ativar-dark:checked ~ .container div{
transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
<label for="ativar-dark">
<div id="rotator">
</div>
</label>
</div>
You can toggle two classes using javascript to achieve the rotation on the click of the rotation element. Start with one present in the HTML element, then toggle them on click.
let circle = document.getElementById('rotator')
circle.addEventListener('click', function(e) {
e.target.classList.toggle('rotate')
e.target.classList.toggle('reverse')
})
.ativar-dark {
width: 50px;
height: 50px;
display: none;
}
#sky {
background-color: black;
position: absolute;
overflow: hidden;
}
#rotator {
position: relative;
width: 7rem;
height: 7rem;
transform: rotate(-45);
border-radius: 50%;
border: 2px solid red;
margin: 3rem;
}
label {
cursor: pointer;
}
#rotator:before,
#rotator:after {
position: absolute;
content: '';
display: block;
height: 3rem;
width: 3rem;
border-radius: 50%;
animation: inherit;
animation-direction: reverse;
}
#rotator:before {
background-color: yellow;
top: -.25rem;
left: -.25rem;
}
#rotator:after {
background-color: White;
bottom: -.25rem;
right: -.25rem;
}
.rotate {
transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transition: all ease 2s;
}
.reverse {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
<label for="ativar-dark">
<div id="rotator" class="reverse">
</div>
</label>
</div>
I'm quite new to coding and I'm having trouble with the "hover".
It opens already on other parts of the website, but not on the specific location I want. Also it somehow stays opened after hovering and leaving the position. Does someone know why? :)
.pill1 {
position: absolute;
left: 300px;
top:10px;
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 15%;
left: 38%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
z-index: 100;
}
.container:hover .pill1 {
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: rgba(22, 32, 162, 0.44);
color: rgba(242, 0, 255, 0.55);
font-family: Akzidenz-Grotesk Pro, bold;
font-size: 20px;
padding: 16px 32px;
width: 300px;
}
<div class="container">
<img src="images/xanax0001.png" alt="Avatar" class="pill1" >
<div class="middle">
<div class="text">"....".</div>
</div>
I want text to be hidden at top of image when i hover it should be visible.
Normally image looks like this without hover with text above it.
But instead i wont text to be shown on top of image when it hover like following
So basically text shown here and div shown here in image above should be hidden initially and when hover is done show those elements.
Something similar to this
code i tried doesnt work
html:
<div class="imgcontainer">
<span class="hideme">Image text</span>
<img class="img-responsive" id="thumbnail" src="source of image">
</div>
css:
.scaleout {
transform: scale(1, 0.80);
-ms-transform: scale(1, 0.80);
-webkit-transform: scale(1, 0.80);
}
.hideme {
color: black;
top: inherit;
z-index: -1;
text-align: center;
vertical-align: middle;
position: relative;
}
please help
I hope this can help you. Jsfiddle
.hideme
{
display: block;
position: absolute;
top: 20px;
right: 0;
left: 0;
margin: 0 auto;
z-index: 10;
transition:0.3s;
}
.imgcontainer:hover .hideme
{
top:0;
}
.imgcontainer
{
width: 201px;
height: 286px;
position: relative;
}
img
{
position: absolute;
bottom: 0;
transition: 0.3s;
left: 0;
right: 0;
margin: 0 auto;
height: 286px;
z-index: 15;
}
.imgcontainer:hover img
{
height: 80%;
bottom: 10%;
}
<div class="imgcontainer">
<span class="hideme">Image text</span>
<img width="100%" class="img-responsive" id="thumbnail" src="http://s7.postimg.org/x3fs9p8cr/image.png">
</div>
Let me help you. :)
.scaleout {
transform: scale(1.25);
-ms-transform: scale(1.25);
-webkit-transform: scale(1.25);
}
.hideme {
font-size: 14px;
color: black;
top: inherit;
z-index: -1;
text-align: center;
vertical-align: middle;
position: relative;
}
#thumbnail {
width: 220px;
height: 150px;
display: block;
transform: scale(1.25);
-ms-transform: scale(1.25);
-webkit-transform: scale(1.25);
transition: all ease 500ms;
}
#thumbnail:hover {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition: all ease 500ms;
}
<div class="imgcontainer">
<span class="hideme">Image text</span>
<img class="img-responsive" id="thumbnail" src="https://www.orbitz.com/blog/wp-content/uploads/2011/09/Albuquerque_International_Balloon_Fiesta_snowpeak-e1315595588824.jpg">
<span class="hideme">Another Image text? No problem :)</span>
</div>
figure { display: flex; flex-direction: column;}
div { order: -1; visibility: hidden; }
img { align-self: flex-start; }
img:hover + div { visibility: visible; }
<figure>
<img src=https://i.stack.imgur.com/mJHKc.png?s=256&g=1>
<div>You see me only when the img is hovered :)</div>
</figure>
.hideme {
font-size: 14px;
color: black;
top: inherit;
z-index: -1;
text-align: center;
vertical-align: middle;
position: relative;
}
#thumbnail {
width: 220px;
height: 150px;
display: block;
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transition: all ease 100ms;
}
#thumbnail:hover {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition: all ease 100ms;
}
<div class="imgcontainer">
<span class="hideme">Image text</span>
<img class="img-responsive" id="thumbnail" src="http://s7.postimg.org/x3fs9p8cr/image.png">
</div>
Try this CSS.It will help you.
For Further CSS(HOVERS & STYLES) visit the website
" http://codepen.io/ "
Regards:Sheheryar
(PAK)
figure {
width: 600px;
height: 400px;
margin:auto;
padding: 0;
background: #fff;
overflow: hidden;
}
.hover01 figure img {
-webkit-transform: scale(0.8);
transform: scale(0.9);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 figure:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div class="hover01 column">
<div >
<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
</div>
</body>
</html>
Please, try this in action. I change opacity on one element and this affects the look of another static element which contains text. It's hard to explain, just try and tell me how can I avoid this effect. It seems to me that this happens only when using chain of transforms.
http://jsfiddle.net/6p8jf3d3/
HTML:
<div class="outer">
<div class="inner"></div>
<div class="text">Hello</div>
</div>
CSS:
div.outer {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 100px;
border: 1px solid black;
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
div.inner {
width: 100%;
height: 100%;
background-color: #99CCFF;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
div.text {
position: absolute;
top: 0;
left: 0;
font-size: 2em;
font-weight: bold;
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
div.outer:hover div.inner {
opacity: 1;
}
Adding transform: translateZ(0); to div.inner will stop the hopping/jarring effect of the transition, but it keeps the stack fuzz on it. It's better, but not perfect:
Example Fiddle
So, I've experimented a bit (not with this jsfiddle but with larger example) and found solution for Chrome, Safari, Opera and Firefox. Combination of translateZ, backface-visibility and transform-style. jsfiddle.net/6p8jf3d3/4
CSS:
div.outer {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 100px;
border: 1px solid black;
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.inner {
width: 100%;
height: 100%;
background-color: #99CCFF;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
div.text {
position: absolute;
top: 0;
left: 0;
font-size: 2em;
font-weight: bold;
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
div.outer:hover div.inner {
opacity: 1;
}