I have a image as a background an I need on hover to fill it with overlay from bottom to top.
I have tried to achieve it with
background-image: linear-gradient(to top, #414042 50%, #fff 50%);
but the issue is that my image is already as a background
<style>
main{
position:relative;
z-index:0;
}
.image-wrapper{
width: 200px;
}
.image{
background: url('http://example.com/my/image')
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
}
</style>
<main>
<div class="image-wrapper">
<div class="image"></div>
</div>
</main>
So my desired output would be that on hovering this image it gets filled with overlay from bottom to top
here is a simple picture of what I need:
https://ibb.co/RbCdkks
This can be achieve using after before & transition property. Please check snippet.
main{
position:relative;
z-index:0;
}
.image-wrapper{
width: 200px;
}
.image{
position:relative;
background: url('http://example.com/my/image')
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
background-image: linear-gradient(to top, #414042 100%, #fff 100%);
-webkit-transition: width 2s; /* Safari prior 6.1 */
transition: width 2s;
width:100%;
overflow:hidden;
}
.image:after{
background: #ff0000;
position:absolute;
width:100%;
height:200px;
bottom:-200px;
left:0px;
content:"";
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
.image:hover:after{
background: #ff0000;
position:absolute;
width:100%;
height:200px;
bottom:0px;
left:0px;
}
<main>
<div class="image-wrapper">
<div class="image"></div>
</div>
</main>
You could achieve image fill animation with CSS :after pseudo attribute.
main {
position: relative;
z-index: 0;
}
.image-wrapper {
width: 200px;
}
.image {
background: url("https://images.unsplash.com/photo-1561549603-b2375b9aface?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
position: relative;
overflow: hidden;
}
.image:after {
content: " ";
position: absolute;
top: 200px;
height: 200px;
transition: all ease 0.4s;
}
.image:hover:after {
top: 0;
width: 100%;
background: #BB2B5B;
}
<main>
<div class="image-wrapper">
<div class="image"></div>
</div>
</main>
This is your solution and your image link is not showing proper in output if you want image then add your image whatever you want
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #7F7F7F;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="data:image/jpeg;base64,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" class="image">
<div class="overlay">
<div class="text"></div>
</div>
</div>
Related
I have created a template which have the page divided in two sections, when I display the site in a desktop resolution all works well, but when I run the site on a smartphone I get the half circle on top and the divider between the two images, not responsive:
Essentially the half red circle, should be reduced in a smartphone resolution, and the divider goes outside the two images, this is what I tried so far:
#media (max-width: 800px) {
.divider{
top: 14.5%;
left: 50%;
height: 64.2%;
transform: translateX(-50%);
}
.circle{
top: -45%;
left: 50%;
width: 500px;
height: 400px;
border-radius: 50%;
}
.logo{
top: 0.5%;
left: 22.5%;
}
}
the problem's that this doesn't cover all the resolution case, so the problem is not fixed at all.
Is there a way to handle all the resolutions and make that template really responsive?
This is my fiddle.
SNIPPET:
body {
background-color: #ffffff;
}
/*Overlay*/
.hovereffect {
width: 50%;
height: 90vh;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #a7151f;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 50px 20px;
justify-content: center;
flex-direction: column;
display: flex;
}
.hovereffect img {
float: left;
width: 50%;
height: 90vh;
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 40px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p,
.hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
font-size: 16px;
}
/*DIVISORE*/
.middle {
position: absolute;
z-index: 9999;
}
.divider {
border-right: 5px solid #a7151f;
position: absolute;
z-index: 10;
top: 14.5%;
left: 50%;
margin: 0;
padding: 0;
width: auto;
height: 76.2%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
}
.circle {
z-index: 10;
position: absolute;
top: -250px;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.logo {
top: 2.5%;
position: absolute;
left: 41.5%;
width: 200px;
margin: 0 auto;
}
<link href="https://demos.creative-tim.com/material-kit-pro/assets/css/material-kit.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Site
</title>
</head>
<body class="sections-page sidebar-collapse">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="hovereffect">
<img class="first">
<div class="overlay">
<h2>First</h2>
<p>
Explore
</p>
</div>
</div>
<span class="divider"></span>
<img class="img-responsive center-block circle">
<span class="circle">
</span>
<img src="#" class="logo" style="z-index: 9999">
<div class="hovereffect">
<img class="second">
<div class="overlay">
<h2>Second</h2>
<p>
Explore
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center justify-content-xl-between">
<div class="col-6">
<div class="copyright text-center text-xl-left text-muted">
© 2019 Credit
</div>
</div>
<div class="col-6">
<div class="row">
Privacy Policy
Terms & Conditions
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
This kind of layout can be achieved with Flexbox with many fewer lines of code. Also, much less HTML markup is required.
Total responsiveness is achieved combining the flexbox behavior with relative units (%, vh, vw).
I put several comments in the CSS to explain what each rule is doing.
body { margin: 0; }
.the-container {
position: relative;
overflow: hidden;
height: 100vh; /* fill the screen */
width: 100vw; /* fill the screen */
}
.the-circle {
position: absolute; /* overlap the pics, removes it from the box flow */
background-color: #a7151f;
border-radius: 50%; /* rectangle becomes an ellipse */
width: 60vw;
height: 30vh;
top: -15vh; /* half of the height */
left: 0; /* these 3 lines... */
right: 0; /* ...keep the "circle"... */
margin: auto; /* ...centered at the top */
}
.the-image-wrapper {
display: flex; /* easy responsive columns */
height: 100%; /* fill the screen */
}
.the-image-wrapper > div {
flex: 1 0 auto; /* items inside the wrapper will grow to fit avilable space */
}
.the-image-wrapper > div.the-divider {
flex: 0 1 5px; /* this divider item will not grow, and will be 5px wide */
background-color: #a7151f;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="the-container">
<div class="the-circle"></div>
<div class="the-image-wrapper">
<div class="first"></div>
<div class="the-divider"></div>
<div class="second"></div>
</div>
</div>
I am making a page-loader in CSS and i want to appear the logo with sliding overlay to right, like the loading bar but here want to make loading logo instead of bar. So here is my code
.underlay{
width: 300px;
height:300px;
margin-left: 300px;
margin-top: 15%;
}
.underlay:before{
content:"";
width: 300px;
height:300px;
position: absolute;
top: 15%;
left: 300px;
z-index: 99;
background: rgba(0,0,0,0.9);
animation-name: slide;
}
<div class="outer">
<div class="underlay">
<img src="logo.png" alt="loading logo">
</div>
</div>
I expect to slide it underlay:before to slide to right slowly
#Ahtsham Ul Haq: Try this code hope it will work for you!
.outer {
transition: all 0.3s linear;
}
.underlay img {
width: 300px;
height:300px;
display: block;
left: 10px
/* margin-left: 300px; */
/* margin-top: 15%; */
}
.underlay:before{
content: "";
width: 300px;
height: 300px;
position: absolute;
top: 10px;
/* left: 300px; */
z-index: 99;
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s linear;
}
.outer:hover .underlay:before {
width: 0;
}
<div class="outer">
<div class="underlay">
<img src="https://i.ibb.co/8M3cFG4/bbb.jpg" alt="loading logo">
</div>
</div>
I have this and it works for me. Thanks for helping me out #Asiya Fatima
.underlay:before{
content:"";
width: 300px;
height:300px;
position: absolute;
top: 200px;
left:0;
z-index: 99;
background: rgba(0,0,0,0.9);
animation-name: slide;
animation-duration: 7s;
animation-timing-function: linear;
}
#-webkit-keyframes slide{
0%{
left:510px;
}
100%{
left:850px;
}
}
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.
I want to make the following animation:
One div with 2 same arrows and on hover first arrow should move on left/right. I tried to do it, but it unsuccessfully. I'm setting background with 2 images, but how I can set animation for 1 of the images like the gif?
.arrow-right2 {
content: "";
background: transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat, transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat;
height: 35px;
position: absolute;
top: -5%;
left: 0;
width: 35px;
}
Try to use 2 different divs with the same arrows, with position absolute and use this to overlap the two arrows. If you can, use a single image, not a sprite. Then apply the effect on hover on one of the images.
body {
background: red;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
position: relative;
}
.arrow1 {
background: url('https://i.imgur.com/u7cYXIo.png') no-repeat -17px -199px;
width: 12px;
height: 24px;
display: block;
left: 0;
position: absolute;
}
.arrow2 {
background: url('https://i.imgur.com/u7cYXIo.png') no-repeat -17px -199px;
width: 12px;
height: 24px;
display: block;
position: absolute;
transition: all 0.4s;
left: 0;
}
.arrow2:hover {
left: -10px;
transition: all 0.4s;
}
<div class="container">
<div class="arrow1">
</div>
<div class="arrow2">
</div>
</div>
You can adjust background-position like below. You start with a different position for each one then you make them the same:
.arrow {
background:
url(https://i.imgur.com/u7cYXIo.png) -10px -185px,
url(https://i.imgur.com/u7cYXIo.png) 10px -185px,
red;
background-repeat:no-repeat;
height: 50px;
width: 50px;
transition:all 0.5s;
}
.arrow:hover {
background-position:10px -185px;
}
<div class="arrow"></div>
Or the opposite
.arrow {
background:
url(https://i.imgur.com/u7cYXIo.png),
url(https://i.imgur.com/u7cYXIo.png),
red;
background-position:10px -185px;
background-repeat:no-repeat;
height: 50px;
width: 50px;
transition:all 0.5s;
}
.arrow:hover {
background-position:
-10px -185px,
10px -185px;
}
<div class="arrow"></div>
And if you want to adjust coloration you can consider mix-blend-mode
.arrow {
background:
url(https://i.imgur.com/u7cYXIo.png),
url(https://i.imgur.com/u7cYXIo.png),
#000;
background-position:10px -185px;
background-repeat:no-repeat;
height: 50px;
width: 50px;
transition:all 0.5s;
position:relative;
}
.arrow:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: red;
mix-blend-mode: multiply;
opacity:0;
transition:all 0.5s;
}
.arrow:hover {
background-position:
-10px -185px,
10px -185px;
}
.arrow:hover:before {
opacity:1;
}
<div class="arrow"></div>
Attached is a brief mockup of what I need to create. The div not only needs to skew on the bottom, but the next row will need to skew to the top.
Is there a clean way this can be done using CSS? I've tried some CSS solutions ( e.g http://jsfiddle.net/mXLgF/ ) but can not get this effect.
My current HTML / CSS is at this stage:
<div class="skew_bottom_right">
<div style="height: 300px; background: url('http://placehold.it/850x350');">
</div>
</div>
.skew_bottom_right div:after {
content: '';
position: absolute;
left: 0;
bottom: -60px;
width: 100%;
height: 115px;
background: white;
-webkit-transform: skewY(8.5deg);
-moz-transform: skewY(8.5deg);
-ms-transform: skewY(8.5deg);
-o-transform: skewY(8.5deg);
transform: skewY(8.5deg);
-webkit-backface-visibility: hidden;
z-index: 5;
}
Each of those containers will eventually made into a slide, so ideally they should be div's with background images or containing divs having a background image.
Your code is pretty good.
Just needed some minor adjustments...
.container{
overflow:hidden;
}
.parallelogram {
width: 600px;
height: 100px;
margin: 30px 0;
transform: skewY(5deg);
background: gray;
overflow:hidden;
position:relative;
}
.parallelogram.header {
height: 150px;
margin: -30px 0;
}
.parallelogram.footer {
height: 150px;
margin: -30px 0;
}
.image{
background: url(http://placekitten.com/300/300);
background: blue;
width: calc(100% / 3);
height: 100%;
display: inline-block;
float: left;
border: 3px solid white;
box-sizing: border-box;
}
<div class="container">
<div class="parallelogram header"></div>
<div class="parallelogram">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<div class="parallelogram footer"></div>
</div>