webkit-transform affect border-radius - css

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);

Related

CSS image effect with 2 transitions on hover

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;
}

why can't I change the height of the box?

i'm trying to create a responsive photo gallery but I couldn't change neither the height or the width of my box.
I was able to fix its width adding style property to the html but it won't work for the height as well.
I've read many thread about the height problem but nothing works for me, some suggested the absolute position instead of relative one but it ruins my layout.
Can't seem to get what i am doing wrong, could anyone help me please?!
Here's my code:
.container {
position: relative;
width: 100%;
margin-top: 5%;
background-color: #203B5B;
padding: 1% 1% 0% 1%;
height: 100%;
}
.container:after {
content: '';
display: inline-block;
width: 100%;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
}
.box {
margin-top: 0%;
height: 20%;
padding-bottom: 90%;
position: relative;
float: left;
cursor: default;
overflow: hidden;
}
.box:after {
content: '';
position: absolute;
cursor: default;
background-color: #000;
margin-left: 0%;
margin-top: 6%;
opacity: 0;
z-index: 55;
width: 50%;
height: 72.5%;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.box:hover::after {
background-color: #000;
opacity: .7;
}
.container .box .caption {
position: absolute;
z-index: 60;
width: 45%;
margin-left: 2.5%;
top: 40%;
-webkit-transform: scale(3);
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform: scale(3);
transform: scale(3);
text-align: center;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
font: 90% montserrat, sans-serif;
color: #fff;
opacity: 0;
}
.box:hover .caption {
-webkit-transform: scale(1) translate(0%, -50%);
-moz-transform: scale(1) translate(0%, -50%);
-ms-transform: scale(1) translate(0%, -50%);
-o-transform: scale(1) translate(0%, -50%);
transform: scale(1) translate(0%, -50%);
opacity: 1;
}
.box img {
position: absolute;
left: 50%;
border-style: solid;
border-color: rgba(255, 255, 255, 0.86);
border-width: 3.5px;
outline-style: solid;
outline-width: 5px;
outline-color: #182D46;
cursor: pointer;
top: 37%;
height: 70%;
width: 95%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 50;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.box:hover img {
height: 70%;
}
<div class="container">
<div class="box" style="width:14.6%;">
<div class="caption">1</div>
<img src="1.jpg" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%;">
<div class="caption">2</div>
<img src="2.png" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%; ">
<div class="caption">3</div>
<img src="3.jpg" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%">
<div class="caption">4</div>
<img src="4.png" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%">
<div class="caption">5</div>
<img src="5.png" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%">
<div class="caption">6</div>
<img src="6.png" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%">
<div class="caption">7</div>
<img src="7.png" width="495" height="533" alt="" />
</div>
</div>
thank you!
If you're setting the width and height for your box div in percentages, it is taking x% of the parent. In this case the container div. Which in this case also got its width and height set in percentages. But you haven't set a width and height for its parent, the <body>. And the <body> has <html> as its parent.
So either define a fixed height and width for the container div, or define a width and height for your <body> and <html> like so:
html,
body {
width: 100%;
height: 100%;
}
Code snippet
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
position: relative;
width: 100%;
margin-top: 5%;
background-color: #203B5B;
padding: 1% 1% 0% 1%;
height: 100%;
}
.box {
width: 14.25%;
height: 50%;
position: relative;
float: left;
cursor: default;
overflow: hidden;
}
.box img {
border: 3.5px solid rgba(255, 255, 255, 0.86);
cursor: pointer;
width: 100%;
}
<div class="container">
<div class="box">
<div class="caption">1</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">2</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">3</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">4</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">5</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">6</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">7</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
</div>

Image rollover effect

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>

Animation skipping in Chrome

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.

prevent children from inheriting transformation css3

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);
}

Resources