I am trying to get a little hover animation going by moving the background image on the x-axis. However, I can't seem to find how to capture the element:hover. Does anyone has an idea what is wrong? Is the selector below valid?
Thank you for your help
div.card:hover .cardbg {
}
.card {
border-radius:15px;
border:none;
height: 280px;
position: relative;
background: linear-gradient(to bottom right,#ffec99 0,#ffb549 100%);
z-index: -1;
font-family: 'Arial';
}
.cardbg {
width: 100%;
height: 100%;
background-image: url('images/atom-original.svg');
opacity: 0.2;
background-size: cover;
background-repeat: no-repeat;
background-position-x: 100px;
transition: .2s ease all;
position: absolute;
top: 0;
left: 0;
}
div.card:hover .cardbg {
background-position-x: 10px;
background-color: red;
}
<div class="card">
<div class="cardbg">
</div>
</div>
Try removing the z-index: -1 from the .card class. That worked for me.
Related
I am trying to replicate this transition from uber.design site:
The thing is that i am stuck at reversing the transition:
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 2px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
<span class="un">Underlined Text</span>
You can use gradient and adjust background-position with a delay to obtain such effect:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: 0 100%; /*OR bottom left*/
background-size: 0% 2px;
background-repeat: no-repeat;
transition:
background-size 0.3s,
background-position 0s 0.3s; /*change after the size immediately*/
}
.un:hover {
background-position: 100% 100%; /*OR bottom right*/
background-size: 100% 2px;
}
<span class="un">Underlined Text</span>
In case you want a continuous animation on hover you can try this:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right -100% bottom 0;
background-size: 200% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left -100% bottom 0;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
You can check this answer for more details about how the calculation of the different value is done: Using percentage values with background-position on a linear-gradient
Another kind of animation
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(to right, #000 33%,#0000 33% 66%,#000 66%);
background-position: right bottom;
background-size: 300% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left bottom;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
let's don't forget the basic one:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right bottom; /* OR left bottom*/
background-size: 100% 2px;
background-repeat: no-repeat;
transition: background-size 0.5s;
}
.un:hover {
background-size: 0% 2px;
}
<span class="un">Underlined Text</span>
You can find more techniques here: https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40
Another related article: Cool Hover Effects That Use Background Properties
You'll need your pseudo element to be absolute positioned and use the :not selector to reproduce this effect.
.un {
display: inline-block;
position: relative;
}
.un:after {
content: '';
width: 0px;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
}
.un:not(:hover):after {
right: 0;
left: auto;
}
<span class="un">Underlined Text</span>
The easiest solution of all, without :not selector or gradients, is to switch between right and left positions such as in the code.
span.un {
position: relative;
}
span.un::after {
position: absolute;
content: "";
background: black;
bottom: 0;
right: 0;
height: 2px;
width: 0%;
transition: 300ms ease-in-out;
}
span.un:hover::after {
width: 100%;
left: 0;
}
<span class="un">Underline me</span>
I am trying to replicate this transition from uber.design site:
The thing is that i am stuck at reversing the transition:
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 2px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
<span class="un">Underlined Text</span>
You can use gradient and adjust background-position with a delay to obtain such effect:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: 0 100%; /*OR bottom left*/
background-size: 0% 2px;
background-repeat: no-repeat;
transition:
background-size 0.3s,
background-position 0s 0.3s; /*change after the size immediately*/
}
.un:hover {
background-position: 100% 100%; /*OR bottom right*/
background-size: 100% 2px;
}
<span class="un">Underlined Text</span>
In case you want a continuous animation on hover you can try this:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right -100% bottom 0;
background-size: 200% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left -100% bottom 0;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
You can check this answer for more details about how the calculation of the different value is done: Using percentage values with background-position on a linear-gradient
Another kind of animation
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(to right, #000 33%,#0000 33% 66%,#000 66%);
background-position: right bottom;
background-size: 300% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left bottom;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
let's don't forget the basic one:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right bottom; /* OR left bottom*/
background-size: 100% 2px;
background-repeat: no-repeat;
transition: background-size 0.5s;
}
.un:hover {
background-size: 0% 2px;
}
<span class="un">Underlined Text</span>
You can find more techniques here: https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40
Another related article: Cool Hover Effects That Use Background Properties
You'll need your pseudo element to be absolute positioned and use the :not selector to reproduce this effect.
.un {
display: inline-block;
position: relative;
}
.un:after {
content: '';
width: 0px;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
}
.un:not(:hover):after {
right: 0;
left: auto;
}
<span class="un">Underlined Text</span>
The easiest solution of all, without :not selector or gradients, is to switch between right and left positions such as in the code.
span.un {
position: relative;
}
span.un::after {
position: absolute;
content: "";
background: black;
bottom: 0;
right: 0;
height: 2px;
width: 0%;
transition: 300ms ease-in-out;
}
span.un:hover::after {
width: 100%;
left: 0;
}
<span class="un">Underline me</span>
I'm creating a hover effect on an image with SCSS on a WordPress site (see gif: https://gyazo.com/1a35247e40d74b5fc756d508de4231eb)
As you see the image gets a "distorted" after hovering over it, maybe the ease-in property is wrong, or I'm not doing the hover effect properly. I'm wondering what I'm doing wrong in the code when it behaves like this.
This is the code that is working:
(left out some SCSS because it was so wast but the & is used to use parent class)
Edit: The HTML & SCSS
<div class="project_container">
<div class="project_content">
Test event
<br>
2018
</div>
<img src="http://testsite.com/wp-content/uploads/2018/12/img.jpg" class="attachment-full aligncenter">
</div>
-
&_container {
position: relative;
height: 300px;
width: 300px;
&:hover {
& > img {
opacity: .2;
}
& > .project_content {
opacity: 1;
}
}
& img {
position: absolute;
width: 100%;
height: 100%;
/*
object-fit: none;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
*/
// Hover tranisiton
transition: opacity .5s;
}
}
&_content {
opacity: 0;
transition: opacity .5s;
// Center Position
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $purple;
z-index: 2;
text-transform: uppercase;
font-size: 20px;
font-weight: 500;
text-align: center;
}
}
So using :hover; on the &_container gives the project_content: opacity: 1;. Then it also blurs the background image with the opacity: .2;, and the effect is achieved with a transition;
Thank you!
I rewrote everything with the hover effect so now I use an overlay class which has opacity: 0; on it (and a transition that takes care of the effect on :hover)
This is a simple version of the HTML:
<div class="project_container">
<div class="project_content">
<p>Content</p>
</div>
<img src="#" alt="test">
<div class="project_overlay"></div>
</div>
and the simplified SCSS:
.project {
&_container {
position: relative;
height: 300px;
width: 300px;
&:hover .project_overlay,
&:hover .project_content {
opacity: 1;
transition: opacity .5s;
}
}
& img {
position: absolute;
width: 100%;
height: 100%;
}
&_overlay {
background-color: rgba(255, 255, 255, .5);
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity .5s;
}
}
I need to achieve this effect: (fucsia is transparent)
I want to use this snipped I've prepared to achieve it:
div {
width: 300px;
height: 100px;
background-image: url(http://lorempixel.com/300/100);
background-size: 0% 100%;
background-repeat: no-repeat;
background-position: center;
transition: background 2s ease;
}
div:hover {
background-size: 100% 100%;
}
CodePen: http://codepen.io/FezVrasta/pen/ByZqvK
I need to generate a CSS gradient that looks like this picture: (fucsia is transparent)
How can I do?
Just use a color stop as follows~:
div {
border:1px solid red;
width: 200px;
height: 100px ;
background-image: linear-gradient(to bottom,
transparent,
transparent 90%,
blue 90%,
blue)
}
<div></div>
Could you use something like this?
.this {
width: 300px;
height: 100px;
background: red;
position: relative;
}
.this div {
position: absolute;
height: 10px;
width: 0px;
margin: 0 auto;
background: blue;
bottom: 0;
left: 50%;
transition: all 0.8s;
}
.this:hover div {
width: 100%;
left: 0;
}
<div class="this">
<div></div>
</div>
If you want to create this type of design using gradients, you could use this generator which would let you define "a transparent" part to your background
I have a div tag. I want to remove the children's inheritance of #overlay's opacity
Here is my code:
<body id="bg">
<div id="overlay">
<header id="colortext">dgjdhgjdhd</header>
</div>
</body>
And this my css code.
#bg{
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-image: url(../Images/bg.jpg);
}
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: #000;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#colortext{
background-image:none;
margin-top: 7px;
margin-left: 16px;
top: 2%;
left: 2%;
color: #FFFFFF;
text-align: left;
font-size: xx-large;
opacity:1 !important;
}
I want to have like this site background: http://www.ehsanakbari.ir/
How can I do this?
You cannot stop children elements from inheriting their parent's opacity.
Instead, you could use an rgba value for the parent's background color instead of opacity:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(0,0,0,0.5);
}
See this SO question for more info.