Is there a proper and smooth CSS solution for a CSS image hover effect that deals with 2 transitions:
brighten the image itself on hover using background-color and opacity
set the playbutton opacity to 100% on hover
my solution's not perfect, the play button's still flickering and not animated smooth.
i'm looking for a cross browser solution as well...
feel free to see my example and what i tried at https://codepen.io/marcusegger/pen/WNReBpa because it's not so easy to explain.
HTML:
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<div class="imgContainer position-relative">
<img src="https://cdn.pixabay.com/photo/2015/02/25/21/20/ipad-649499_1280.jpg" class="img-fluid" />
</div>
</div>
</div>
</div>
CSS:
.imgContainer {
background: #293D4F;
}
.imgContainer img {
opacity: .25;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img:hover {
opacity: 1;
}
.imgContainer::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
content: url(https://www.daslandhilft.de/assets/img/play.svg);
opacity: .5;
}
.imgContainer:hover::before {
content: url(https://www.daslandhilft.de/assets/img/play.svg);
opacity: 1;
}
You need to set pointer-events: none inside .imgContainer:hover::before, due to 'interferences' with the hover attribute of its children element img. So it should look like this:
.imgContainer {
background: #293D4F;
}
.imgContainer img {
opacity: .25;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img:hover {
opacity: 1;
}
.imgContainer::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
content: url(https://www.daslandhilft.de/assets/img/play.svg);
opacity: .5;
}
.imgContainer:hover::before {
content: url(https://www.daslandhilft.de/assets/img/play.svg);
opacity: 1;
pointer-events: none;
}
Related
I am working on giving style to my menu, I really am something new in this
What I try to do is that when my menu appears it will see a transition from left to right, when it is hidden from it will be hidden from the left
I am really learning how to work with style sheets, I search the web and I have not managed to make it work as I wish
#media (max-width: 828px) {
#menu-header.show {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#menu-header {
display: block ;
position: fixed;
z-index: 1;
background-color: #FFF;
left: 0;
top: 100px;
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
width: 90%;
padding: 20px 20px;
max-width: 87.5%;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 350ms ease;
-moz-transition: all 350ms ease;
-ms-transition: all 350ms ease;
-o-transition: all 350ms ease;
transition: all 350ms ease;
}
Some example where you can help me to solve my problem, since my menu currently makes a transition from top to bottom, and what I am looking for is from left to right
var header = document.getElementById('menu-header');
var button = document.getElementById('button');
button.addEventListener('click', function(){
header.classList.toggle('show');
});
#media (max-width: 828px) {
#menu-header {
display: block;
position: fixed;
z-index: 1;
background-color: #FFF;
left: 0;
top: 0;
height: 100%;
width: 40%;
padding: 20px 20px;
transform: translateX(-100%);
transition: transform 350ms ease;
background: #c33;
}
#menu-header.show {
transform: translateX(0);
}
}
#button {
position: fixed;
right: 0;
top: 0;
}
<div id="menu-header">
MENU
</div>
<button id="button">
Click me
</button>
I am all new to CSS and CSS animation and I have been curious how to achieve the image rollover effects used here: http://riot.design/portfolio/
Anyone kind enough to show me how its done?
Thank you in advance!
If you want a Slide effect for a Picture you can use CSS3
HTML:
<div class="hover column">
<div>
<figure><img src="surce/pic01.jpg" /></figure>
<span>Hover</span>
</div>
CSS:
.hover figure img {
margin-left: 30px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
That gives you a slide effect.
.media{
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
}
.media img{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition: all ease .5s;
}
.media:hover img{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.overlay{
background: rgba(0,0,0,.5);
visibility: hidden;
opacity: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1;
}
.media:hover .overlay{
visibility: visible;
opacity: 1;
}
.link{
position: absolute;
padding: 15px;
border: 1px solid #fff;
color: #fff;
transition: all .5s ease;
left: 50%;
top: 50%;
transform: translate(-50%, 0);
}
.media:hover .link{
transform: translate(-50%, -50%);
}
<div class="media">
<div class="overlay">
Link
</div>
<div class="media-image">
<img src="http://lorempixel.com/200/200/nature/" class="img-responsive" alt=""></div>
</div>
I'm currently working on this site, I've added an animation to this, however the animation seems to skip when hovering in and out. It seems very random, sometimes it will skip to the end of the animation, other times it will skip to the start.
/*** GRID ***/
* {
box-sizing: border-box;
}
.row:after, .row:before {
content: "";
display: block;
overflow: hidden;
}
.row:after {
clear: both;
}
.row>* {
float: left;
}
.col-1-2 {
width: 50%;
}
/*** CODE ***/
.post {
position: relative;
overflow: hidden;
}
.post img {
width: 100%;
height: auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.panel {
display: flex;
align-items: center;
position: absolute;
z-index: 10;
padding: 0 80px;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
background: rgba(0,200,200,0.5);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.post:hover .panel {
opacity: 0;
}
.post:hover img {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
<div class="row">
<div class="col-1-2">
<div class="post">
<div class="panel">
<div class="content">
<span>Text</span>
<h1>More Text</h1>
</div>
</div>
<img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=800%C3%97550&w=800&h=550" />
</div>
</div>
<div class="col-1-2">
</div>
</div>
I've made a codepen to replicate it.
Hover over the image until the animation has fully stopped.
Hover out and back in again.
Does it cut to the end rather than transition?
Any help is much appreciated (it's driving me insane)
It seems to be a bug with Chrome using opacity. I've swapped to using rgba values instead.
I am trying to perform a CSS3 transform transition on an image at the mouse-hover.
This image has a border-radius that disappear after the animation ( In Chrome ) .
here is the html:
<div class="inner">
<a class="imgLink" href="item.iframe.htm" target="_top">
<img src="myimage.jpg" alt="">
<span class="imgLinkOverlay"> </span>
</a>
</div>
and the css:
.inner {
margin: 0.75em;
background: #FFF;
border-radius: 10px;
overflow: hidden;
position: relative;
zoom: 1;
}
.imgLink img {
width: 100%;
display: block;
position: relative;
-webkit-transition: -webkit-transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out;
}
.imgLink:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
Here can find the fiddle: http://jsfiddle.net/3x2ft/
FIxed!
I added this rule to .inner:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
I have a div that i'm tranforming (scale and translate), but inside that div i have another div. Now i would to see that the inner div isnt affected by the transformation of its parent, in other words. I would like for the inner div to not scale like his parent does.
Here is the html:
<div id="rightsection">
<div class="top"></div>
<div class="middle">
<div class="large">
<img src="assets/images/rightpanel_expanded.png" alt="map" title="map"/>
</div>
</div>
<div class="bottom">
<p>Check if your friends are going!</p>
</div>
</div>
Here is my css:
#rightsection:hover {
-moz-transform:scale(2.16,2.8) translate(-80px,-53px);
-webkit-transform:scale(2.16,2.8) translate(-80px,-53px);
-o-transform:scale(2.16,2.8) translate(-80px,-53px);
-ms-transform:scale(2.16,2.8) translate(-80px,-53px);
transform:scale(2.16,2.8) translate(-80px,-53px)
}
So the problem is, when i scale #rightsection, the img gets scaled to, but i would like to keep the image on its original size.
Any help is appreciated.
Here is it what worked for me..
I used opposite transition for children. Then it was stable
.logo {
background: url('../images/logo-background.png') no-repeat;
width: 126px;
height: 127px;
margin-top:-24px;
z-index: 10;
display: block;
}
a.logo span{
display: block;
width: 126px;
height: 127px;
background: url('../images/logo-bismi.png') no-repeat;
z-index: 20;
text-indent: -9999px;
text-transform: capitalize;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
a.logo:hover span{
-webkit-transform: rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
}
a.logo {
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
a.logo:hover{
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
Do as usual. Set "transform: none" to all of children.
.children1,
.children2,
.childrenN {
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
transform: none;
}
.parent {
position: relative;
background-color: yellow;
width: 200px;
height: 150px;
margin: 70px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.child {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
<div class="parent">
<div class="child"></div>
</div>
First you can make the children of the parent positioned in the 3D-space by set transform-style: preserve-3d; in parent, then you can apply transform-functions in reverse order of parent to children elements that want to keep front.
.parent {
transform: rotateX(33deg) rotateY(66deg) rotateZ(99deg);
/* Notice! You should make the children of the parent positioned in the 3D-space. */
transform-style: preserve-3d;
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 4px solid darkblue;
}
.child {
/* Notice! You should apply the opposite order of rotations (transform functions) from the parent element. */
transform: rotateZ(-99deg) rotateY(-66deg) rotateX(-33deg);
position: absolute;
width: 80px;
height: 80px;
background: aqua;
}
<div class="parent">
<div class="child">
I'am a child want keep front.
</div>
</div>
See: css - How to prevent children from inheriting 3d transformation CSS3? - Stack Overflow
This should work as a general rule in most cases.
You can apply the same rule to the other transform methods.
.parent {
transform: rotate(-90deg);
}
.parent > * {
/* to cover elements like <span> */
display: block;
transform: rotate(90deg);
}