I would like to have a hover effect on image that would display two buttons on mouse hover. I got it partially working. However currently my image has some black borders on sides, also image itself is somehow shrunk and buttons are not positioned in the centre. Does anybody have some idea how to fix these issues?
Here is how it looks like currently:
.container {
background-color: #000;
display: inline-block;
font-size: 16px;
overflow: hidden;
position: relative;
text-align: center;
width: 110px;
height: 110px;
}
.container:before,
.container:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
background-color: #000000;
border-left: 0px solid #fff;
border-right: 0px solid #fff;
content: '';
opacity: 0.3;
z-index: 1;
}
.container:before {
-webkit-transform: skew(0deg) translateX(-155%);
transform: skew(0deg) translateX(-155%);
}
.container:after {
-webkit-transform: skew(0deg) translateX(155%);
transform: skew(0deg) translateX(155%);
}
.container img {
backface-visibility: hidden;
width: 100%;
height: 100%;
vertical-align: top;
}
.container button {
top: 50%;
left: 50%;
position: absolute;
z-index: 2;
-webkit-transform: translate(-50%, -180%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
.container:hover button {
opacity: 1;
}
.container:hover>img,
.container.hover>img {
opacity: 0.5;
}
.container:hover:before,
.container.hover:before {
-webkit-transform: skew(0deg) translateX(-50%);
transform: skew(0deg) translateX(-50%);
}
.container:hover:after,
.container.hover:after {
-webkit-transform: skew(0deg) translateX(50%);
transform: skew(0deg) translateX(50%);
}
.container:hover figcaption,
.container.hover figcaption {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
<div class="container">
<img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" />
<Row>
<Col Span="12">
<Button OnClick="() => this.RemoveImage(context)" Danger>Delete</Button>
</Col>
<Col Span="12">
<Button OnClick="() => this.OpenPreviewDialog(context)">View</Button>
</Col>
</Row>
</div>
body {
height: 100vh;
display: grid;
place-items: center;
}
.content img {
width: 50vw;
}
.content {
display: grid;
place-items: center;
position: relative;
}
#button-div {
position: absolute;
display: none;
}
.content img:hover~#button-div {
display: flex;
gap: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
<div id="button-div">
<button>first button</button>
<button>second button</button>
</div>
</div>
</body>
</html>
Actually, both buttons are overlapped. You need to set separate class for both button and change top positioning.
HTML:
<Button class="button1" OnClick="() => this.RemoveImage(context)" Danger tool>Delete</Button>
<Button class="button2" OnClick="() => this.OpenPreviewDialog(context)">View</Button>
CSS:
.container button1 {
top: 60%;
left: 50%;
position: absolute;
z-index: 2;
-webkit-transform: translate(-50%, -180%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
.container button2 {
top: 40%;
left: 50%;
position: absolute;
z-index: 2;
-webkit-transform: translate(-50%, -180%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
Hope it helps.
Related
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 have created a loader using loader.io and integrated the css and HTML in the angular application but my loader is not displayed on the center of the screen with backdrop as it should.
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
I want to bring the loader to the center.
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 50%;
left: 50%;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<body>
<div class="centered">
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
</div>
<style>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
color:darkred;
}
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
</style>
</body>
</html>
Im working on a slider and im burn out, you guys know how it is, working on something so much eventually the brain just cant do it, so im going to leave it for today and ask you if you have an answer for the issue.
So heres my slider on html
.header {
grid-area: header;
border: 1px solid black;
background-color: black;
}
.slideshow {
width: 923px;
height: 500px;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
}
.slideshow-container {
width: 4615px;
font-size: 0;
transition: 1s ease;
height: 500px;
overflow: hidden;
}
.slideshow-container:hover {
animation-play-state: paused;
}
.slide {
animation: slide 24s ease infinite;
}
.img1 {
width: 923px;
height: auto;
object-fit: cover;
}
.img2 {
width: 923px;
height: auto;
object-fit: cover;
}
.img3 {
width: 923px;
height: auto;
object-fit: cover;
}
.img4 {
width: 923px;
height: auto;
object-fit: cover;
}
.img5 {
width: 923px;
height: auto;
object-fit: cover;
}
#keyframes slide {
10% {
margin-left: 0px;
}
20% {
margin-left: -923px;
}
30% {
margin-left: -923px;
}
40% {
margin-left: -1846px;
}
50% {
margin-left: -1846px;
}
60% {
margin-left: -2769px;
}
70% {
margin-left: -2769px;
}
80% {
margin-left: -3692px;
}
90% {
margin-left: -3692px;
}
}
.dot1 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 400px;
z-index: 2;
}
.dot1:hover {
border: 2px solid white;
background-color: black;
}
.dot2 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 430px;
z-index: 2;
}
.dot3 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 460px;
z-index: 2;
}
.dot4 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 490px;
z-index: 2;
}
<div class="header">
<div class="slideshow">
<span class="dot1"></span>
<span class="dot2"></span>
<span class="dot3"></span>
<span class="dot4"></span>
<div class="slideshow-container slide">
<img class="img1" src="https://i.imgur.com/xGMtCkJ.jpg">
<img class="img2" src="https://i.imgur.com/1F5Gtuz.jpg">
<img class="img3" src="https://i.imgur.com/GgikuGI.jpg">
<img class="img4" src="https://i.imgur.com/LlTDfcH.jpg">
<img class="img5" src="https://i.imgur.com/hNLNCgQ.png">
</div>
</div>
</div>
So here is what the slider and keyframes look like
What im looking for is a part of a code that i can include to
.dot1:hover {
border: 2px solid white;
background-color: black;
}
So what i want is that when someone hover's over the first dot the slider goes to the first keyframe or image, and so on with the other dots, if anyone knows a way to make that happen without javascripts and if i can reverse the keyframe animation that would be perfect.
thanks :)
It's possible using CSS:
Here is the snippet for slider using pure css:
.csslider {
display: inline-block;
position: relative;
max-width: 480px;
width: 100%;
margin-top: 10px;
}
.csslider > .cs_anchor {
display: none;
}
.csslider > ul {
position: relative;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
.csslider > ul > li.img img {
width: 100%;
}
.csslider > ul > li.img {
font-size: 0pt;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
.csslider > ul > li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
white-space: normal;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.csslider .cs_lnk{
position: absolute;
top: -9999px;
left: -9999px;
font-size: 0pt;
opacity: 0;
filter: alpha(opacity=0);
}
.csslider > .cs_bullets {
position: absolute;
left: 0;
width: 100%;
z-index: 6;
font-size: 0;
line-height: 8pt;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider > .cs_bullets > div {
margin-left: -50%;
width: 100%;
}
.csslider > .cs_bullets > label {
position: relative;
display: inline-block;
cursor: pointer;
}
.csslider > .cs_description {
z-index: 3;
}
.csslider > ul > li {
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2000ms ease, -webkit-transform 24000ms linear;
-moz-transition: opacity 2000ms ease, -moz-transform 24000ms linear;
-ms-transition: opacity 2000ms ease, -ms-transform 24000ms linear;
-o-transition: opacity 2000ms ease, -o-transform 24000ms linear;
transition: opacity 2000ms ease, transform 24000ms linear;
}
.csslider > ul > li.num0 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, 11.53846%);
transform: scale(1.3) translate(-11.53846%, 11.53846%);
}
.csslider > ul > li.num1 {
opacity: 0;
-webkit-transform: scale(1.3) translate(11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(11.53846%, 11.53846%);
transform: scale(1.3) translate(11.53846%, 11.53846%);
}
.csslider > ul > li.num2 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, -11.53846%);
transform: scale(1.3) translate(-11.53846%, -11.53846%);
}
.csslider > ul > li.num0 {
opacity: 1;
z-index: 2;
}
.csslider > .slide:hover ~ ul > li.num0 {
opacity: 0;
z-index: 1;
}
.csslider > #cs_slide1_0:hover ~ ul > li.num0,.csslider > #cs_slide1_1:hover ~ ul > li.num1,.csslider > #cs_slide1_2:hover ~ ul > li.num2 {
opacity: 1;
-webkit-transform: scale(1) translate(0, 0);
-moz-transform: scale(1) translate(0, 0);
-ms-transform: scale(1) translate(0, 0);
-o-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
z-index: 2;
}
.csslider > .cs_bullets {
bottom: 5px;
margin-bottom: 5px;
}
.csslider > .cs_bullets > label {
margin: 0 6px;
padding: 9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > .cs_bullets > label.num0 {
background-color: #E34B64;
}
.csslider > .slide:hover ~ .cs_bullets > label {
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > #cs_slide1_0:hover ~ .cs_bullets > label.num0,
.csslider > #cs_slide1_1:hover ~ .cs_bullets > label.num1,
.csslider > #cs_slide1_2:hover ~ .cs_bullets > label.num2 {
background-color: #E34B64;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>
</title>
</head>
<body>
<div class='csslider autoplay '>
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' hover>
<input name="cs_anchor1" id='cs_pause1' type="radio" class='cs_anchor'>
<ul>
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
<img src="http://cssslider.com/sliders/pen/images/buns.jpg" style="width: 100%;">
</div>
<li class='num0 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Buns' title='Buns' />
</li>
<li class='num1 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Croissant' title='Croissant' />
</li>
<li class='num2 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Lemon pie' title='Lemon pie' />
</li>
</ul>
<div class='cs_bullets'>
<label class='num0' for='cs_slide1_0'>
<span class='cs_point'></span>
</label>
<label class='num1' for='cs_slide1_1'>
<span class='cs_point'></span>
</label>
<label class='num2' for='cs_slide1_2'>
<span class='cs_point'></span>
</label>
</div>
</div>
</body>
</html>
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>
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.