I've been trying to apply a CSS3 -webkit-transform effect on a image inside a columns scheme. Currently I've the following demo:
<html>
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<style>
div.colSection article {
display: inline-block;
column-break-after: always;
column-break-inside:avoid;
break-inside:avoid-column;
-webkit-column-break-after: always;
-moz-column-break-after: always;
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
}
div.colSection.noticias {
column-count: 3;
-webkit-column-count:3;
-moz-column-count:3;
}
img.scale {
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
img.scale:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="section main" id="noticias">
<h1>News</h1>
<div class="colSection noticias">
<article>
<img src="http://i.imgur.com/ysmA3VD.jpg" alt="" class="scale" />
<h2>N1</h2>
<p>T1</p>
</article>
<article>
<img src="http://i.imgur.com/ysmA3VD.jpg" alt="" class="scale" />
<h2>N2</h2>
<p>T2</p>
</article>
<article>
<img src="http://i.imgur.com/ysmA3VD.jpg" alt="" class="scale" />
<h2>N3</h2>
<p>T3</p>
</article>
</div>
</div>
</body>
</html>
The problem with the code is that the animation tend to end up in strange behaviors, for instance:
Safari
When I place the mouse over the second image, no animation happens but the image just disappears. The first one works as indented and nothing happens on the last one.
Chrome
The middle image goes down and the last one flickers a bit.
Related
I can't share a page on this, due to the page not being public. However, what I'm trying to do is create a hover effect on both a div and a H4 text element. Nothing of which seems to work for me. Here's my code:
HTML:
<div class="grid__item small--one-half medium-up--one-quarter">
<a href="/collections/hoop-earrings" class="collection-item collection-item--overlaid" data-aos="row-of-4"><div class="image-wrap">
<div class="collection-image collection-image--square lazyload" style='background-position: center center; background-image: url("https://cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_720x.jpg?v=1561755337");'>
</div>
</div>
<noscript>
<div
class="collection-image collection-image--square"
style="background-image: url(//cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_400x.jpg?v=1561755337); background-position: center center;">
</div>
</noscript>
<div class="collection-image--overlay-background"></div>
<span
class="collection-item__title collection-item__title--overlaid collection-item__title--heading collection-item__title--center">
<span>
Text Goes Here
</span>
</span>
</a>
</div>
CSS:
.collection-image--overlay-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center {
opacity: 0!important;
-moz-transition: opacity .25s linear;
-webkit-transition: opacity .25s linear;
-o-transition: opacity .25s linear;
transition: opacity .25s linear;
}
#media only screen and (min-width: 768px) {
.collection-image--overlay-background:hover {
z-index: 1;
opacity: .8;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center:hover {
z-index: 1;
opacity: 1;
}
}
I tried making a small snippet. See if it´s what you´re looking for.
Since you´re using the !important flag in one of your opacity rules, all the other changes after the fact will not take effect unless you also use !important. However I would not advice using !important that freely because whenever they are present such errors are a bit harder to track.
.container {
background-color: blue;
height: 100px;
}
.onHover {
background-color: red;
width: 80%;
height: 100px;
margin: 0 auto;
opacity: 0.5;
/*opacity: 0.5 !important; In your code you have
a line like this.*/
}
.onHover:hover {
opacity: 1;
}
<div class="container">
<div class="onHover">
<h4>My title Here</h4>
</div>
</div>
I am applying this css transformation to an image in a table when the cursor hover over the image..
transform-origin: bottom right;
-webkit-transform: scale(5) ;
I have tried every which way to get the origin outside the image, but it seems there is no way. If the origin is 'right' the image expands to the left obscuring the original image.
I would like to to put the transform image in a fixed location outside the table altogether! Or at least expose the small image.
* {
margin: 0;
padding: 0;
}
img {
width: 100%;
-webkit-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
img:hover {
-webkit-transform: translate3d(25px, 25px, 100px);
transform: translate3d(25px, 25px, 100px);
-webkit-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</div>
</body>
</html>
Instead of using transform-origin: bottom right; use transform: translate3d(25px, 25px, 100px); property. Hope it'll help
I'm trying to get a smooth "hover out" animation when you stop hovering the object. The font-awesome icon is rotating when you hover the whole button.
I'm using it:
#keyframes roll {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
.p-navEl a:first-child:hover::before {
animation: roll .5s linear infinite;
}
HTML for the first button of the nav bar
<ul class="p-nav-list js-offCanvasNavSource">
<li>
<div class="p-navEl is-selected" data-has-children="true">
Forums
<a data-xf-key="1" data-xf-click="menu" data-menu-pos-ref="< .p-navEl" data-arrow-pos-ref="< .p-navEl" class="p-navEl-splitTrigger" role="button" tabindex="0" aria-label="Basculer en mode étendu" aria-expanded="false" aria-haspopup="true"></a>
<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
<div class="menu-content">
Nouveaux messages
Trouver des discussions
Vos discussions
Discussions avec vos messages
Discussions sans réponse
<hr class="menu-separator">
Suivies
Discussions suivies
Forums suivis
<hr class="menu-separator">
Rechercher dans les forums
Marquer les forums comme lus
</div>
</div>
</div>
</li>
</ul>
PREVIEW
The bubble before "FORUMS" is rotating when you hover it. But I want the animation smooth when you stop hovering it
but when you don't hover the link anymore, the animation is brutaly stopped.
Any idea?
I can't share the original CSS since it's a userscript for a public/private website I'm not the owner!
Please do try transitions like below and let me know fiddle!.
HTML
<body bgcolor="#333">
<div class="display-center">
<span>Rotate</span>
</div>
</body>
Css
.display-center{
display:flex;
justify-content: center;
align-items: center;
height: 400px;
width: 100%;
background-color: white;
}
span {
background-color: gray;
padding: 10px;
border-radius: 8px;
color: #222;
text-align: center;
transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
display: block;
margin-right: auto;
margin-left: auto;
}
span:hover {
transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
I have three images in a row. The images don't have text in them. That needs to be added with the code. I used the method described in posts here (using relative and absolute positions) and have it somewhat working. Here is the jsfiddle. There are two main problems.
First, the placement isn't consistent. If the window is resized, the text doesn't move with the image. On a smartphone, the text disappears completely.
Second, when the images are mousedover they expand. But if the mouse is moved over the text, the expanding stops. If I remove the z-index then the text disappears when the image is mousedover. I want to have the text always show but also to expand the image. My code is below. It is taken from the example here, except for the text overlay, which I added. Is it possible to add text to an image that changes and have it work as described?
<style>
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
</style>
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items"><img src="http://placehold.it/130x130"></li>
<div id="bannerText_0">Img 1</div>
<li id="1" class="nav-items"><img src="http://placehold.it/130x130"></li>
<div id="bannerText_1">Img 2</div>
<li id="2" class="nav-items"><img src="http://placehold.it/130x130"></li>
<div id="bannerText_2">Img 3</div>
</ul>
</div>
The main problem is that the structured your HTML incorrectly - you can't put <div>s in between the <li> elements in the <ul>.
As well as causing the broken layout, its also the reason the mouseover on the text affects the image doesn't work - the text isn't actually inside an nav-item element that has the hover effect.
You can solve all your problems by putting your div's inside the <li> elements!
Bonus Fix :), I've also fixed the space at the bottom under the image - just make the image display:block;.
Your Fiddle, updated with these changes: https://jsfiddle.net/pcpg7zww/2/
Working snippet:
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
display:block; /* this will remove the space at the bottom */
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_0">Img 1</div>
</a>
</li>
<li id="1" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_1">Img 2</div>
</a>
</li>
<li id="2" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_2">Img 3</div>
</a>
</li>
</ul>
</div>
I've been working with transforms and transitions to create animated UI components without Javascript and really enjoying the results, but I've come across a disturbing issue that appears to be unique to webkit browsers.
On an element which I have rotated, an anchor that spans 100% of the width of the element is only accessible on the right 50% of the element.
This problem does not exist using -moz-transform in Firefox, but is 100% reproducible in both Chrome and Safari using -webkit-transform.
Here is the code:
<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
#card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all 0s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
-moz-transform: rotateY(0deg);
-moz-transition: all 0s linear 0s;
-webkit-transform: rotateY(0deg);
-webkit-transition: all 0s linear 0s;
width:230px;
height:236px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.face.front {
background-color:#000;
}
</style>
</head>
<body class="non-mobile">
<div id="card-lists">
<ul class="card-list" id="cardes-list-total">
<li>
<div class="flipcard-container">
<div class="flipcard">
<div class="front face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
<div class="back face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Any help anyone could offer would be greatly appreciated as I've already spent an inordinate amount of time on the issue.
After combing through the webkit Bugzilla, I found someone who had the same issue and found a workaround.
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
Becomes:
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
The addition of the translateZ to the transform makes the left side of the element clickable.
Here is a link to the bug: https://bugs.webkit.org/show_bug.cgi?id=54371
I used this code below
<style>
.outer div {
float: left;
-webkit-perspective: 200px;
-webkit-transform-style: preserve-3d;
}
.outer a {
-webkit-transition: all 1.0s ease-in-out;
background:#0F6;
width:100px;
height:100px;
display:block;
-webkit-transform: rotateY(45deg);
}
.outer div:hover a {
-webkit-transform: none;
}
</style>
<div class="outer">
<div>
</div>
</div>
This solution works for me in chrome. http://jsfiddle.net/jaxweb/7qtLD/7/