I am looking for a solution to create an image hover effect and keeping the image same height as widht at the same time. Here is my code right now:
.kozossegitag {
content: "";
display: block;
width: 100%;
padding-top: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden
}
.reszletek {
width: 100%;
padding-top: 100;
background-color: rgba(67,85,103,0.7);
opacity: 0;
}
.kozossegitag:hover .reszletek {
background-color: rgba(67,85,103,0.5);
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
<div class="kozossegitag">
<div class="reszletek">
<span>Koren Miklós</span>
</div>
</div>
My goal is to cover the whole image with this pastel blue color and place the text right on the image. As you see here (the left one is without hover, the right one is with):
Many thanks for every help!
Cheers,
Pepe
Add this to your css:
.kozossegitag:hover{
background-color: lightblue;
background-blend-mode: multiply;
}
Here is the JSFiddle demo
It's not overly neat, as it's a little rushed but you get the idea. I used position absolute and some pseudo elements to create what I think you're trying to achieve.
CSS:
.kozossegitag {
display: block;
width: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden;
position: relative;
}
/* give the div the ratio height */
.kozossegitag::after {
content: "";
padding-top: 100%;
display: block;
}
.reszletek {
width: 100%;
opacity: 0;
}
.kozossegitag:hover .reszletek {
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
z-index: 10;
position: relative;
}
/* overlay the light blue using ::before */
.kozossegitag:hover::before {
content: "";
background-color: rgba(67, 85, 103, 0.7);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
Working example.
By positioning .kozossegitag relatively, you can position .reszletek absolutely right over top of it by setting width and height to 100% and top and left to 0.
You also forgot to set height to 0 on .kozossegitag to keep it square;
.kozossegitag {
height:0;
position:relative;
content: "";
display: block;
width: 100%;
padding-top: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden
}
.reszletek {
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-color: rgba(67,85,103,0.7);
opacity: 0;
}
.kozossegitag:hover .reszletek {
background-color: rgba(67,85,103,0.5);
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
Fiddle: http://jsfiddle.net/trex005/rpafw24q/
Related
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>
I have an animation that I want to achieve and I am not able to be getting it right.
I've searched the internet and found some solutions, however they have a slight change in the animation.
I want a border animation that starts at the bottom left goes to top left then top right then bottom right and finally back to bottom left. Each animation after another and the borders once appeared should stay visible afterwards.
This is the code I've managed to get: https://jsfiddle.net/gwbn427m/
div {
width: 300px;
height: 200px;
display: inline-block;
padding: 30px;
/*bottom: -25;*/
position: relative;
border: 0;
}
.draw {
transition: color 0.25s;
}
.draw::before,
.draw::after {
/* Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts*/
border: 2px solid transparent;
width: 0;
height: 0;
box-sizing: inherit;
content: '';
position: absolute;
}
/* This covers the top & right borders (expands right, then down)*/
.draw::before {
left: 0;
bottom: 0;
}
/* And this the bottom & left borders (expands left, then up) */
.draw::after {
right: 0;
top: 0;
}
.draw:hover {
color: red;
}
/* Hover styles */
.draw:hover::before,
.draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: res; /*Make borders visible */
border-right-color: red;
transition:
width 0.25s ease-out 0.25s, /* And then height */
height 0.25s ease-out; /* Width expands first */
}
.draw:hover::after {
border-bottom-color: red; /* Make borders visible */
border-left-color: red;
transition:
border-color 0s ease-out 0.5s, /* Wait for ::before to finish before showing border*/
width 0.25s ease-out 0.75s, /* And finally height*/
height 0.25s ease-out 0.5s; /*And then exanding width*/
}
<div class="draw">
<img src="http://via.placeholder.com/200x100">
</div>
However I've tried it with those https://codepen.io/sean_codes/pen/YZWqLo keyframe animation and couldn't get it right either.
I really would appreciate any help!
To achieve that you will need two divs so that you can create four different elements using its pseudo elements :before and :after and then use transition-delay to delay the transition
.main {
width: 200px;
height: 200px;
position: relative;
}
.item {
height: 100%;
}
.main:before,
.main:after,
.item:before,
.item:after {
content: "";
position: absolute;
background: red;
}
.main:before {
width: 2px;
height: 0;
bottom: 0;
left: 0;
}
.main:after {
height: 2px;
width: 0;
top: 0;
left: 0;
}
.item:before {
width: 2px;
height: 0;
top: 0;
right: 0;
}
.item:after {
height: 2px;
width: 0;
right: 0;
bottom: 0;
}
.main:hover:before {
height: 100%;
transition: all .5s linear;
}
.main:hover:after {
width: 100%;
transition: all .5s linear .5s;
}
.main:hover .item:before {
height: 100%;
transition: all .5s linear 1s;
}
.main:hover .item:after {
width: 100%;
transition: all .5s linear 1.5s;
}
<div class="main">
<div class="item">
Some Content
</div>
</div>
I am using a simple :hover:after in CSS to create a dark overlay on top of a div. I also am using transition property to make it fade in and out instead of simply appearing and disappearing.
Now, fading in it does brilliantly, but fading out, on the other hand, doesn't. It simply disappears as if there never was no transition to being with.
Here's the simplified code:
HTML:
<div class="innerImg"></div>
CSS(full code):
.innerImg {
float: left;
height: 74%;
background-image: url("../images/an_image.jpg");
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
border-bottom: 1px solid #9F9F9F;
transition: all .2s ease;
overflow: hidden;
position: relative;
}
.innerImg:hover {
border-color: #F8CE26;
transition: all .2s ease;
}
.innerImg:after {
transition: all .2s ease;
content: "";
}
.innerImg:hover:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.7);
cursor: pointer;
transition: all .2s ease;
}
In desperation, I applied transition everywhere, but still, there were no changes. Originally, just putting it inside .innerImg and .innerImg:after was enough. In fact, it didn't work until I created just :after and gave that transition.
Anything stupid I'm missing here?
This is happening because you placed all the CSS properties that define the object's size on the hover selector. So when you aren't hovering over it, it has no size (and it disappears instantly).
What it looks like when not being hovered over:
What it should look like:
To fix, just move all of the size/layout properties from .innerImg:hover:after to .innerImg:after.
.innerImg:after {
display: block;
transition: all .2s ease;
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
cursor: pointer;
}
.innerImg:hover:after {
background-color: rgba(0, 0, 0, 0.7);
}
Demo (I slowed down the animation so it's easier to see):
.innerImg {
float: left;
height: 74%;
background-image: url("../images/an_image.jpg");
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
border-bottom: 1px solid #9F9F9F;
transition: all .5s ease;
overflow: hidden;
position: relative;
}
.innerImg:hover {
border-color: #F8CE26;
transition: all .5s ease;
}
.innerImg:after {
display: block;
transition: all .5s ease;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
cursor: pointer;
}
.innerImg:hover:after {
background-color: rgba(0, 0, 0, 0.7);
}
<div class="innerImg">Hover over me!</div>
I made this rollover:
jsfiddle.net/DH6Lu/
But as you can see the background image glitches. This is not the case when I don't use the opacity on the main div:
http://jsfiddle.net/6KT9p/
Any idea what is wrong?
<div id="opacity">
<div class="box">
<a class="link" href="#">
<div class="inner">
<img src="http://lorempixel.com/340/192/" width="340" height="192">
<div class="description">
<h3>titel2</h3>
</div>
</div>
</a>
</div>
</div>
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.inner img {
position: absolute;
opacity: 1;
-webkit-transition: opacity 0.5s ease;
}
.inner img:hover {
opacity: 0.15
}
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0 fixed;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
.description h3 {
color: #fff;
font-size: 18px;
text-transform: uppercase;
text-align: center;
position: absolute;
}
#opacity {
opacity: 0.5
}
The problem arises from the fixed property of the background.
Set the CSS to
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
and it will work
fiddle
The problem is also linked to the GPU handling this different from the CPU. The GPU is handling the background during the transtion, the CPU in the static states. If you set transform: translateZ(1px) - one of the usual tricks to enable GPU - the background will be permanently in an offset. It solves the glitch, but the look isn't correct.
I guess it glitches because .inner inherits the opacity from #opacity... but I don't know why. Interesting.
Still, I have a workaround for your case, if you want to keep the initial alpha to 0.5: make the .inner half visible, hide the .description unless it's hovered.
The adjacent sibling selector + is useful to show the description when the image is hovered.
Here's what you have to add (existent properties omitted):
.inner img {
-webkit-transition: opacity 0.5s ease;
opacity:0.5;
}
.inner img:hover{
opacity:0.15;
}
.inner img:hover + .description{
opacity:1;
}
.description {
-webkit-transition: opacity 0.5s ease;
opacity:0;
}
Here's a working demo for this.
Is it possible to add an opacity transition to CSS3 div overlay target?
JSFIDDLE: http://jsfiddle.net/pb7St/
#content {
background-color: #ccc;
height: 300px;
width: 300px;
z-index:1;
}
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease;
}
#overlay {
display:none;
}
#overlay:target {
display:block;
opacity: 1;
}
Is there any other (better) way to close / hide the div? Currently I'm using:
href="#_"
Yes, there is:
JSFiddle Demo
CSS
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease, visibility 1s 0s; /* added visibility transition */
}
#overlay {
//display:none;
visibility:hidden
}
#overlay:target {
//display:block;
visibility:visible;
opacity: 1;
}
EDITED to add transition to visibility with delay for fade-out effect. Personally, I'd go with JQuery. :)