#gallery div::after {
content: "";
position: absolute;
top: 0;
}
#gallery div:hover::after {
background-image: url("files/img/plus.jpg") !important;
background-repeat: no-repeat;
height: 83px;
right: 0;
width: 83px;
transition: background 1300ms ease-in 2s;
}
#gallery a:nth-child(1) div {
background-image: url("files/img/bio/1.jpg");
background-size: cover;
height: 240px;
position: relative;
width: 240px;
}
I'm trying to add a fade effect to plus.jpg background-image, applied on the ::after pseudoelement on hover. As you can see I tried with transition: background 1300ms ease-in 2s but nothing is happening..
Here you can see the code live (is the gallery with 9 images.
background-images can't be transitioned. But since it's just a simple plus sign, I suggest the ff:
#gallery div::after {
background-color: #ddaa44;
color: white;
content: "+";
display: block;
font: 44px/44px verdana;
opacity: 0;
padding: 26px;
position: absolute;
right: 0;
top: 0;
}
#gallery div:hover::after {
opacity: 1;
transition: all 0.2s ease-in-out 0s;
}
Related
I'm trying to animate a background-color over an image. It works fine on any browser/OS combination except Safari on macOS. I don't know if there's a workaround or a solution for this problem but I couldn't find any information on it while searching SO or Google.
Below is an example, you should try it on Safari. You'll also find a gif of the problem right under it, for those of us who don't own a mac.
.container {
width: 300px;
height: 300px;
position: relative;
}
.img {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
background-image: url('https://picsum.photos/300');
}
.img::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #AD00D2;
opacity: 0.2;
z-index: -1;
-webkit-transition: opacity 0.4s, background-color 0.4s;
-moz-transition: opacity 0.4s, background-color 0.4s;
transition: opacity 0.4s, background-color 0.4s;
}
.container:hover .img::before {
background-color: #AD00D2;
opacity: 0.6;
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 1.2;
padding: 2rem 0;
}
.text::before {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -moz-linear-gradient(280deg, #F12958, #AD00D2);
background: linear-gradient(170deg, #F12958, #AD00D2);
opacity: 0.8;
z-index: -1;
}
<div class="container">
<div class="img"></div>
<div class="text">Text content</div>
</div>
I've found a pretty simple solution: remove the .text::before rule and replace it with a background on the text element.
.container {
width: 300px;
height: 300px;
position: relative;
}
.img {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
background-image: url('https://picsum.photos/300');
}
.img::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #AD00D2;
opacity: 0.2;
z-index: -1;
-webkit-transition: opacity 0.4s, background-color 0.4s;
-moz-transition: opacity 0.4s, background-color 0.4s;
transition: opacity 0.4s, background-color 0.4s;
}
.container:hover .img::before {
background-color: #AD00D2;
opacity: 0.6;
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 1.2;
padding: 2rem 0;
background: -moz-linear-gradient(280deg, #F12958, #AD00D2);
background: linear-gradient(170deg, #F12958, #AD00D2);
opacity: 0.8;
}
<div class="container">
<div class="img"></div>
<div class="text">Text content</div>
</div>
I have the following 2 classes:
.background-image {
background-image: url('../assets/artworkNight.png');
transition-property: background-image;
transition-duration: 10s;
}
.background-image:hover {
background-image: url('../assets/artworkDay.png');
}
So whenever I hover on .background-image the background begins to slowly change over the course of 10 seconds. The problem is that if I unhover the image during second 4-5, it abruptly transitions back to the original image. I was wondering if it's possible to make to transition out the same way it transitions in. For example:
If I hover for 4 seconds, then unhover, I'd want it to take 4 seconds before it completely reverts back to the original image. Is this possible with CSS?
Not really sure how to achieve this only with css other than including more elements.
Maybe this helps anyway.
.background {
position: relative;
}
.background,
.background-image1,
.background-image2 {
height: 400px;
}
.background-image1{
background-image: url('https://dummyimage.com/600x400/d92ed9/d92ed9');
position: relative;
transition: opacity 4s ease;
}
.background-image2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://dummyimage.com/600x400/000000/000000);
opacity: 0;
transition: opacity 4s ease;
}
.background .background-image1:hover {
opacity: 0;
}
.background .background-image2:hover {
opacity: 1;
}
<div class="background">
<div class="background-image1"></div>
<div class="background-image2"></div>
</div>
Try changing the transition-timing-function. These might give you what you're looking for.
transition-timing-function: ease-in-out;
Or
transition-timing-function: linear;
Try this
#pic1 {
position: absolute;
width: 500px;
height: 500px;
}
#pic2 {
position: absolute;
width: 500px;
height: 500px;
transition: opacity 10s;
}
#pic2:hover {
opacity: 0;
}
<img src='https://static.toiimg.com/photo/72975551.cms' alt="pic1" id="pic1"/>
<img src='https://neilpatel.com/wp-content/uploads/2017/09/image-editing-tools.jpg' alt="pic2" id="pic2"/>
background-image is not an animatable property. As a workaround, you can use ::before selector, and use opacity transition between the main element and its ::before selector.
Also, the requirement is satisfied with one single element.
* {
margin: 0;
}
.background-image {
background: url("https://cdn.pixabay.com/photo/2014/03/26/17/50/sunset-298850_960_720.jpg");
background-size: cover;
width: 100vw;
height: 100vh;
opacity: 1;
}
.background-image::before {
content: "";
width: inherit;
height: inherit;
background: url("https://cdn.pixabay.com/photo/2019/02/14/07/28/painting-3995999_960_720.jpg") no-repeat;
position: absolute;
transition-property: opacity;
transition-duration: 10s;
background-size: cover;
top: 0;
left: 0;
opacity: 0;
}
.background-image:hover::before {
opacity: 1;
}
<div class="background-image"></div>
Im trying to trigger multiple hover effects when hovering over my main div. I can´t figure out how make the line animate on all three links at the same time, and whether this can be done in only css or if i have to use javascript, and im not finding the right solution to previous posts. Here is the code:
.right-project-headline h2 a {
text-decoration: none;
color: black;
position: relative;
}
.right-project-headline h2 a::before, .right-project-headline h2 a::after {
content: '';
background: black;
position: absolute;
top: 55%;
height: 3px;
width: 0;
}
.right-project-headline h2 a::before {
left: 0;
}
.right-project-headline h2 a::after {
right: 0;
transition: width 500ms ease;
}
.right-project-headline h2 a:hover::before {
width: 100%;
transition: width 500ms ease;
}
.right-project-headline h2 a:hover::after {
width: 100%;
background: transparent;
transition: 0;
}
<div class="right-project-headline">
<h2>The</h2>
<h2>Industrial</h2>
<h2>Revolutions</h2>
</div>
I would simplify your code like below and apply hover effect on the parent container
.right-project-headline h2 a {
text-decoration: none;
color: black;
background: linear-gradient(black, black) no-repeat;
background-size: 0% 4px; /*left:0 top:55%*/
background-position: 0% 55%; /*left:0 top:55%*/
transition: background-size 0.5s, background-position 0s 0.5s;
}
.right-project-headline:hover h2 a {
background-size: 100% 4px; /*width:100% height:4px*/
background-position: 100% 55%; /*right:0 top:55%*/
}
<div class="right-project-headline">
<h2>The</h2>
<h2>Industrial</h2>
<h2>Revolutions</h2>
</div>
Here is another syntax for background-position (more intuitive):
.right-project-headline h2 a {
text-decoration: none;
color: black;
background: linear-gradient(black, black) no-repeat;
background-size: 0% 4px;
background-position: left 0 top 55%;
transition: background-size 0.5s, background-position 0s 0.5s;
}
.right-project-headline:hover h2 a {
background-size: 100% 4px;
background-position: right 0 top 55%;
}
<div class="right-project-headline">
<h2>The</h2>
<h2>Industrial</h2>
<h2>Revolutions</h2>
</div>
Another one with the shorthand version and less of code:
.right-project-headline h2 a {
text-decoration: none;
color: black;
background: linear-gradient(black, black) var(--p,0%) 55%/var(--p,0%) 4px no-repeat;
transition: background-size 0.5s, background-position 0s 0.5s;
}
.right-project-headline:hover h2 a {
--p:100%;
}
<div class="right-project-headline">
<h2>The</h2>
<h2>Industrial</h2>
<h2>Revolutions</h2>
</div>
You have to add :hover to your div in CSS and not to your a elements.
This is selector for a in div
div a
This is selector for hovered a in div
div a:hover
And this is selector for a in hovered div
div:hover a
So this should do the trick
.right-project-headline h2 a {
text-decoration: none;
color: black;
position: relative;
}
.right-project-headline h2 a::before, .right-project-headline h2 a::after {
content: '';
background: black;
position: absolute;
top: 55%;
height: 3px;
width: 0;
}
.right-project-headline h2 a::before {
left: 0;
}
.right-project-headline h2 a::after {
right: 0;
transition: width 500ms ease;
}
.right-project-headline:hover h2 a::before {
width: 100%;
transition: width 500ms ease;
}
.right-project-headline:hover h2 a::after {
width: 100%;
background: transparent;
transition: 0;
}
You need to catch the hover event on the element with class .right-project-headline and then apply the style to the <a> elements inside it, like this:
.right-project-headline:hover a::before {
width: 100%;
transition: width 500ms ease;
}
.right-project-headline:hover a::after {
width: 100%;
background: transparent;
transition: 0;
}
Complete Example:
.right-project-headline {
border: 1px solid red;
}
.right-project-headline a {
text-decoration: none;
color: black;
position: relative;
}
.right-project-headline a::before, .right-project-headline a::after {
content: '';
background: black;
position: absolute;
top: 55%;
height: 3px;
width: 0;
}
.right-project-headline a::before {
left: 0;
}
.right-project-headline a::after {
right: 0;
transition: width 500ms ease;
}
.right-project-headline:hover a::before {
width: 100%;
transition: width 500ms ease;
}
.right-project-headline:hover a::after {
width: 100%;
background: transparent;
transition: 0;
}
<div class="right-project-headline">
<h2>The</h2>
<h2>Industrial</h2>
<h2>Revolutions</h2>
</div>
I need to do a task where I have an image, this image is being covered in some color fade, and when I hover on image - fade dissapears (the example is https://html5up.net/uploads/demos/forty/ ). I did it, but I also have to do a transition so that disappearing of fade will be slower for 2 seconds. I tried to put transition property everywhere and I failed. Any help, please?
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
Instead of this block of code :
.photo-text.one:hover:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
You can simplify by simply hiding the overlay by modifying its opacity to 0 with the transition of opacity and the duration you need:
.photo-text.one:hover > .img-overlay{
transition: opacity 1.5s ease-in-out;
opacity: 0;
}
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
transition: opacity 1s ease-in-out;
}
.photo-text.one:hover > .img-overlay{
transition: opacity 1.5s ease-in-out;
opacity: 0;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
You could just hover over the .img-overlay, but since you also want to have the same effect when hovering over the text, leave it as it is and just replace the :after pseudo-element (don't need it) with the > .img-overlay, set its opacity to 0 and apply the transition property as desired:
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
max-width: 100%; /* responsiveness */
}
.img-overlay {
position: absolute; /* needs to be on the child since the relative position is on the parent */
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
transition: opacity 2s linear; /* optional / when "unhovering" */
}
/* added */
.photo-text.one:hover > .img-overlay {
opacity: 0;
transition: opacity 2s linear; /* can also try other values such as "ease", "ease-out" etc. */
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
i am trying to get the background color to change on hover. Something like this.
I have tried various approaches but cannot get it to work, presumably it is the way my CSS and HTML is set up. I cannot figure out why it is not working, as it should be easy to implement
Please see code below.
CSS
.image-container {
position: relative;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
display: none;
color: #FFF;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.image-container .after p {
position: relative;
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 300;
line-height: 300px;
height: 300px;
}
.image-container:hover .after {
display: block;
background: rgba(0,0,0,0.3);
background-position: 0 -100%;
}
[class*='col-'] {
float: left;
}
.col-1-3 {
width: 33.33%;
}
HTML
<div class="col-1-3 image-container">
<img class="portrait-image geysir" src="images/geysir.jpg">
<div class="after">GEYSIR</div>
</div>
Remove the background declaration on the hover. It's overriding all the other backgrounds you declared previously.
.image-container:hover .after {
display: block;
background-position: 0 -100%;
}
It should then work.
Based on the given fiddle, I would use a transparent .png image as a second overlapping element like that. Not sure if that's your intention...
.container{
position:relative;
}
.box {
width: 400px; height: 200px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.box:hover {
background-position: 0 -100%;
}
.geysir{
position:absolute;
top:0px;
}
<div class="container">
<div class="box"></div>
<img class="portrait-image geysir" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/high-resolution-dark-blue-denim-jeans-icons-arrows/008776-high-resolution-dark-blue-denim-jeans-icon-arrows-hand-pointer1-right.png">
</div>
Do you want to have the background, including the text slide in from the top on hover? In which case you would be better transitioning a bottom move like this:
.image-container {
position: relative;
overflow: hidden;
}
.image-container .after {
position: absolute;
bottom: 100%;
margin: auto;
width: 100%;
height: 100%;
color: #fff;
background-color: black;
-webkit-transition: bottom 1s;
-moz-transition: bottom 1s;
transition: bottom 1s;
}
.image-container:hover .after {
bottom: 0;
}
Fiddle
If you're looking to have your text appear on a red background that shifts to black, try using a combination of the above with what you were using. Avoid using display: none/block as this stops the transistion from functioning.
.image-container {
position: relative;
overflow: hidden;
}
.image-container .after {
position: absolute;
bottom: 100%;
margin: auto;
width: 100%;
height: 100%;
color: #fff;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 2s;
-moz-transition: background-position 2s;
transition: background-position: 2s;
}
.image-container:hover .after {
bottom: 0;
background-position: 0 -100%;
}
Fiddle