How can I make the image always contain perfectly inside the container as the exact same height and width?
.container {
width: 500px!important;
height: 800px!important;
}
.container:before {
content: "";
background: rgba(0, 0, 0, 0.2);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
width: 500px;
height: 800px;
}
.content_holder {
position: absolute;
bottom: 0;
padding: 5%;
}
.custom_container .content_holder h3 {
color: #fff!important;
}
.custom_container .content_holder p {
color: #fff!important;
}
<div class="container">
<img src="http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg" />
<div class="content_holder">
<p>Subject</p>
<h3>Container Title</h3>
<a class="button">Learn more</a>
</div>
</div>
For some reason the image doesn't sit in the container like on the website i tried to add it to.
http://wrighthand.uk.w3pcloud.com
Try this:
.container {
width: 500px!important;
height: 800px!important;
}
.container:before {
content: "";
background: rgba(0,0,0,0.2);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
width: 500px;
height: 800px;
}
.content_holder {
position: absolute;
bottom: 0;
padding: 5%;
}
.custom_container .content_holder h3 {
color:#fff!important;
}
.custom_container .content_holder p {
color:#fff!important;
}
<div class="container">
<img src="http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg" width="100%" height="100%"/>
<div class="content_holder">
<p>Subject</p>
<h3>Container Title</h3>
<a class="button">Learn more</a>
</div>
</div>
It now fits perfectly. (It's a bit distorted, however...)
You can put your image as a background of the container and then use background positioning properties such as,
background-image: url('http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
.container {
width: 500px;
height: 800px;
background-image: url('http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
.container:before {
content: "";
background: rgba(0, 0, 0, 0.2);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
.content_holder {
position: absolute;
bottom: 0;
padding: 5%;
color: #fff;
}
a {
color: inherit;
}
<div class="container">
<div class="content_holder">
<p>Subject</p>
<h3>Container Title</h3>
<a class="button">Learn more</a>
</div>
</div>
Related
I have just started to learn about coding in school, and I'm trying to make a simple project.
I have created a flip card consisting of the Finnish flag and an image. The problem is that when I hover over the flag and it flips, half the picture doesn't show.
.wallpaper {
background: green;
height: 2000px;
width: 1920px;
position: absolute;
}
.flag {
height: 310px;
width: 550px;
background: white;
position: relative;
}
.horizontal {
position: relative;
background: rgba(0, 54, 128, 255);
height: 75px;
top: 40%;
}
.vertical {
position: relative;
top: -75px;
bottom: 0;
left: -75px;
right: 0;
margin: auto;
background: rgba(0, 54, 128, 255);
height: 310px;
width: 75px;
}
.vodka {
height: 200px;
width: 200px;
}
img {
position: relative;
top: 900px;
bottom: 0;
left: 525px;
right: 0;
width: 350px;
height: 250px;
}
.text {
position: absolute;
left: 450px;
top: 100px;
}
.mannen {
color: white;
position: relative;
top: 200px;
left: 75px;
}
.myten {
color: rgba(0, 54, 128, 255);
position: relative;
top: 200px;
left: 200px;
}
.legenden {
color: white;
position: relative;
left: 300px;
top: 200px;
}
.container {
background: rgba(0, 54, 128, 255);
position: fixed;
height: 100px;
width: 1920px;
top: 0;
}
.mikko {
color: white;
position: relative;
left: 800px;
}
.group {
position: relative;
left: 250px;
}
.flip-card {
background: transparent;
width: 550px;
height: 310px;
perspective: 1000px;
position: absolute;
top: 500px;
left: 450px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.image {
position: relative;
top: -900px;
left: 525px;
transform: scale(-1, 1);
z-index: -1;
}
<div class="wallpaper">
<div class="group">
<div class="text">
<h1 style="font-family: Verdana">
<div class="mannen">Mannen,</div>
<div class="myten">myten,</div>
<div class="legenden">legenden!</div>
</h1>
</div>
<div class="vodka">
<img src="https://folkofolk.se/sites/default/files/styles/article_large/public/2016-02/Finlandia_0.jpg.jpeg?itok=2vkru5VU" />
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flag">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
<div="flip-card-back">
<div class="image">
<img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mikko">
<h1 style="font-family: Verdana">Mikko Tähtinen</h1>
</div>
</div>
</div>
Removed some of the top/left properties of the person image and added
height: 310px;
width: 550px;
object-fit: cover;
to the .image class and some minor changes .
Style according to need and it is advised not to use such a positioning using all from top/bottom as these will be hard to debug and know the behavior
.wallpaper {
background: green;
height: 2000px;
width: 1920px;
position: absolute;
}
.flag {
height: 310px;
width: 550px;
background: white;
position: relative;
}
.horizontal {
position: relative;
background: rgba(0, 54, 128, 255);
height: 75px;
top: 40%;
}
.vertical {
position: relative;
top: -75px;
bottom: 0;
left: -75px;
right: 0;
margin: auto;
background: rgba(0, 54, 128, 255);
height: 310px;
width: 75px;
}
.vodka {
height: 200px;
width: 200px;
}
img {
position: relative;
bottom: 0;
right: 0;
}
.text {
position: absolute;
left: 450px;
top: 100px;
}
.mannen {
color: white;
position: relative;
top: 200px;
left: 75px;
}
.myten {
color: rgba(0, 54, 128, 255);
position: relative;
top: 200px;
left: 200px;
}
.legenden {
color: white;
position: relative;
left: 300px;
top: 200px;
}
.container {
background: rgba(0, 54, 128, 255);
position: fixed;
height: 100px;
width: 1920px;
top: 0;
}
.mikko {
color: white;
position: relative;
left: 800px;
}
.group {
position: relative;
left: 250px;
}
.flip-card {
background: transparent;
width: 550px;
height: 310px;
perspective: 1000px;
position: absolute;
top: 500px;
left: 450px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.image {
height: 310px;
width: 550px;
object-fit: cover;
position: relative;
transform: scale(-1, 1);
z-index: -1;
}
<div class="wallpaper">
<div class="group">
<div class="text">
<h1 style="font-family: Verdana">
<div class="mannen">Mannen,</div>
<div class="myten">myten,</div>
<div class="legenden">legenden!</div>
</h1>
</div>
<div class="vodka">
<img src="https://folkofolk.se/sites/default/files/styles/article_large/public/2016-02/Finlandia_0.jpg.jpeg?itok=2vkru5VU" style="width:550px;height:310px;" />
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flag">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
<div="flip-card-back">
<div class="image">
<img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mikko">
<h1 style="font-family: Verdana">Mikko Tähtinen</h1>
</div>
</div>
</div>
Simple image flip from above :
.flag {
height: 310px;
width: 550px;
background: white;
position: relative;
margin: 20px;
}
.horizontal {
position: relative;
background: rgba(0, 54, 128, 255);
height: 75px;
top: 40%;
}
.vertical {
position: relative;
top: -75px;
left: -75px;
margin: auto;
background: rgba(0, 54, 128, 255);
height: 310px;
width: 75px;
}
.flipImage1 {
position: absolute;
top: 0;
left: 0;
background-color:white;
z-index: -10;
transform: rotateY(180deg);
}
.flag:hover {
transform: rotateY(180deg);
transform-style: preserve-3d;
}
<div class="flag">
<div class="horizontal"></div>
<div class="vertical"></div>
<img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" class="flipImage1" />
</div>
Ok first, good on you for learning code.
second, this might be counter intuitive but you shouldn't be using position absolute and transform translate for this much positioning you should try using display flex or grid,
also the problem is that chrome seems to be having problems with z-index: -1 from that .image.
an easier way to do this is to use transition-delay on the image instead of having the image perspective change
I can't get this text to position (and center) itself on top of this image overlay I made.
The code of the image and its overlay is:
#post {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
padding: 9px;
}
#post img {
width: 250px;
height: 250px;
max-width: 250px;
max-height: 250px;
border: 2px solid #fafafa;
}
.overlay {
position: relative;
color: #fff;
}
.overlay:before {
content: "";
z-index: 5;
display: block;
position: absolute;
height: 25%;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5)
}
<div id="post">
<div class="overlay">
Hello!
<img src="https://cdn.discordapp.com/attachments/766845496593219594/874918388856684574/image0.png" />
</div>
It keeps appearing like this:
An image of Childe from Genshin Impact with an overlay over him, and "Hello!" at the top of the image.
I want the text ("Hello!") to be ON TOP of the overlay, centered and not affected by the overlay. I'd also like to be able to put at least 2 lines of text. How can I do this?
Since you've already created a relative parent (the .overlay), we can wrap the text node, which is currently naked, with a simple span— basically, something which lets us target and position it.
#post {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
padding: 9px;
}
#post img {
width: 250px;
height: 250px;
max-width: 250px;
max-height: 250px;
border: 2px solid #fafafa;
}
.overlay {
position: relative;
color: #fff;
}
.overlay:before {
content: "";
z-index: 5;
display: block;
position: absolute;
height: 25%;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5)
}
.overlay .text {
position: absolute;
z-index: 5;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
}
<div id="post">
<div class="overlay">
<span class="text">Hello!</span>
<img src="https://cdn.discordapp.com/attachments/766845496593219594/874918388856684574/image0.png" />
</div>
</div>
jsFiddle
HTML is
<div id="post">
<div class="overlay">
<span class="text">Hello!</span>
<img src="https://cdn.discordapp.com/attachments/766845496593219594/874918388856684574/image0.png"/>
</div>
CSS is
.overlay{
position: relative;
}
.overlay .text{
position: absolute;
left: 200px;
top: 120px;
}
See Position's Approach here
target your text with a span class and add a top element to that with the .overlay and .overlay::before
#post {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
padding: 9px;
}
#post img {
width: 250px;
height: 250px;
max-width: 250px;
max-height: 250px;
border: 2px solid #fafafa;
}
.overlay {
position: relative;
color: #fff;
}
.overlay:before {
content: "";
z-index: 5;
display: block;
position: absolute;
height: 25%;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: rgba(0, 0, 0, 0.5)
}
.overlay span {
position: absolute;
z-index: 5;
bottom: 22px;
left: 50%;
top: 10%;
transform: translateX(-50%);
}
<div id="post">
<div class="overlay">
<span>Hello!</span>
<img src="https://cdn.discordapp.com/attachments/766845496593219594/874918388856684574/image0.png" />
</div>
</div>
I am creating a design of controls to personalize the reproduction of videos, having some errors in the design there is a disorder in the design and even more when it comes to visualizing in different type of responsive screen.
In the design of the Speed as I can order them with a drop-down menu as shown in the following example image:
How can I give the correct style to the progress bar similar to the following image:
And carry an adaptive order similar to it.
My code complete:
.seeker {
position: relative;
width: 54%;
margin: 0 1%;
display: inline-block;
margin-right: 5px;
margin: 0 10px;
}
.trackbar {
position: absolute;
width: 100%;
height: 1px;
top: 12px;
z-index: -2;
background: rgba(255,255,255,0.7);
}
.progressbar {
position: absolute;
left: 0;
top: 12px;
width: 0;
height: 1px;
border: 0;
background-color: red;
color: red;
z-index: 0;
pointer-events: none;
}
.content-video-player {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
/*background: -webkit-linear-gradient(left,rgba(0,0,0,.7) 0px,rgba(0,0,0,.7) 95px,transparent 95px,transparent 98px,rgba(0,0,0,.7) 98px);*/
background: rgba(0,0,0,.7);
-webkit-transition: bottom .4s ease-in;
}
.content-video-player div.btn {
width: 95px;
text-align: center;
float: left;
}
.btnPlay::after {
content: "";
background-image: url(http://svgshare.com/i/3um.svg);
width: 50px;
height: 50px;
display: inline-block;
background-size: cover;
position: relative;
top: -7px;
}
.btnStop::after {
content: "";
background-image: url(http://svgshare.com/i/3vz.svg);
width: 65px;
height: 65px;
display: inline-block;
background-size: cover;
position: relative;
top: -7px;
}
.video-time-player {
float: right;
color: #ccc;
text-align: center;
width: 15%;
}
.volume {
position: relative;
cursor: pointer;
width: 70px;
height: 10px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.volumeBar {
display: block;
height: 30%;
position: absolute;
top: 0;
left: 0;
background-color: #a4c9ec;
z-index: 10;
}
.sound, .btnFS {
border: none;
float: right;
}
.sound::after {
content: "";
background-image: url(http://svgshare.com/i/3v6.svg);
width: 45px;
height: 40px;
display: inline-block;
background-size: cover;
position: relative;
top: -4px;
}
.btnFS::after {
content: "";
background-image: url(http://svgshare.com/i/3u5.svg);
width: 25px;
height: 25px;
display: inline-block;
background-size: cover;
position: relative;
top: 6px;
}
<!-- Container of the controls vidio players -->
<div class="content-video-player">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnStop btn" title="Stop video"></div>
<div class="spdText btn">Speed: </div>
<div class="btnx1 btn text selected" title="Normal speed">x1</div>
<div class="btnx3 btn text" title="Fast forward x3">x3</div>
<div id="seeker" class="seeker">
<div class="trackbar"></div>
<div id="progressbar" class="progressbar" style="width: 114.7px;">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="video-time-player">
<span class="current">00:03</span> /
<span class="duration">00:03</span>
</div>
</div>
<div class="btnFS" title="Switch to full screen"></div>
<div class="volume" title="Set volume">
<span class="volumeBar" style="width: 84.2857%;"></span>
</div>
<div class="sound sound2" title="Mute/Unmute sound"></div>
</div>
The player layout is mainly 3 components (display: inline-table) within .content-video-player (display:table):
.playbackComponent | .timeComponent | .modComponent
▶ ] [ ⏸ ] [ X ] |_____ 07:22/15:01 | 🔉||||||| ⛶
The controls in each of the components have display:table-cell for a stable linear layout and position:absolute for finer grain adjustments. Included is a menu to adjust playbackRate, just hover over the 3rd button from the left X
Demo
*,
*::after,
*::before {
margin: 0;
padding: 0;
border: 0 none rgba(0, 0, 0, 0);
}
body {
overflow-y: scroll;
}
.content-video-player>* {
display: inline-table;
}
.content-video-player {
position: relative;
transform: translateY(68vh);
left: 0;
width: 100%;
height: 40px !important;
background: rgba(0, 0, 0, .7);
transition: bottom .4s ease-in;
display: table;
table-layout: fixed;
}
.seeker {
position: absolute;
width: 30%;
display: table-cell;
margin: 0 5px;
top: calc(50% - 6px);
left: 100px;
}
.trackbar {
position: absolute;
width: 100%;
height: 1px;
top: 12px;
z-index: -2;
background: rgba(255, 255, 255, 0.7);
}
.progressbar {
position: absolute;
left: 0;
top: 12px;
width: 0;
height: 1px;
border: 0;
background-color: red;
color: red;
z-index: 0;
pointer-events: none;
}
.content-video-player button.btn {
width: 48px;
text-align: center;
background-color: rgba(0, 0, 0, 0);
display: table-cell;
}
.btnPlay::after {
content: "";
background-image: url(http://svgshare.com/i/3um.svg);
width: 48px;
height: 48px;
display: table-cell;
background-size: cover;
position: absolute;
top: -4px;
}
.btnStop::after {
content: "";
background-image: url(http://svgshare.com/i/3vz.svg);
width: 56px;
height: 56px;
display: table-cell;
background-size: cover;
position: absolute;
left: 25px;
top: calc(50% - 28px);
}
.btnSpd {
transform: translateX(-35px);
height: 48px;
width: 48px;
font-size: 24px;
top: calc(50% - 24px);
}
.video-time-player {
position: absolute;
color: #ccc;
text-align: center;
left: 11.5em;
font-size: .3em;
width: auto;
min-width: 90px;
}
.video-time-player>* {
display: inline-block;
}
.volume {
position: relative;
cursor: pointer;
width: 80px;
height: 10px;
right: -5em;
top: 17px;
}
.volumeBar {
display: block;
height: 30%;
position: absolute;
background-color: #a4c9ec;
z-index: 10;
}
.sound,
.btnFS {
border: none;
}
.sound::after {
content: "";
background-image: url(http://svgshare.com/i/3v6.svg);
width: 45px;
height: 40px;
display: table-cell;
background-size: cover;
position: absolute;
top: 4px;
left: 25.5em;
}
.btnFS::after {
content: "";
background-image: url(http://svgshare.com/i/3u5.svg);
width: 25px;
height: 25px;
right: 5px;
display: table-cell;
background-size: cover;
position: absolute;
top: 12px;
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.speed:hover,
.btnSpd:hover .speed {
display: inline-table;
list-style: none;
max-height: 300px;
transition: max-height 1s;
top: -170px;
}
.cmp {
width: 30%
}
<!-- Container of the controls vidio players -->
<main class='content-video-player'>
<section class="cmp playbackComponent" style='display:inline-table'>
<button class="btnPlay btn" title="Play/Pause video"></button>
<button class="btnStop btn" title="Stop video"></button>
<button class="btnSpd btn">X
<ul class='speed'>
<li>x3.0</li>
<li>x2.5</li>
<li>x2.0</li>
<li>x1.5</li>
<li>x1.0</li>
<li>x0.5</li>
</ul>
</button>
</section>
<section class='cmp timeComponent' style='display:inline-table'>
<div id="seeker" class="seeker">
<div class="trackbar"></div>
<div id="progressbar" class="progressbar" style="width: 114.7px;">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<time class="video-time-player">
<b class="current">00:03</b> /
<b class="duration">00:03</b>
</time>
</div>
</section>
<section id='cmp ModComponent' style='display:inline-table'>
<div class="volume" title="Set volume">
<span class="volumeBar" style="width: 84.2857%;"></span>
</div>
<button class="btn sound sound2" title="Mute/Unmute sound"></button>
<button class="btn btnFS" title="Switch to full screen"></button>
</section>
</main>
I have a theme that has markup like this:
<div class="logo">
<a id="logo" href="http://test.rudtek.com" title="test">
<img class="logo-main scale-with-grid" src="/wp-content/uploads/2017/03/seasons_management_logo.jpg" alt="seasons_management_logo">
</a>
<div class="containerBox">
<img class="img-responsive" <img="" src="/wp-content/uploads/revslider/slider-home-4/img-slider-4-3-825x510.jpg">
<div class="text-box">
<p class="dataNumber">Home 4</p>
</div>
</div>
</div>
This gives me an image like this:
BUt what I really want it to look like is this:
Size ratio isn't the most important here, but I can't fiture out how to get the seasons logo to go over the dear image.
This is my css:
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 30%;
text-align: center;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
margin: auto;
padding: auto;
}
.dataNumber {
margin-top: auto;
}
You can absolutely position #logo over .containerBox and give #logo a z-index so it will stack on top, then use a margin-left on .containerBox to push it to the right.
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 30%;
text-align: center;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
margin: auto;
padding: auto;
}
.dataNumber {
margin-top: auto;
}
/* added these styles */
.logo {
position: relative;
}
#logo {
position: absolute;
top: 1em; left: 0;
z-index: 1;
background: white;
}
.containerBox {
margin-left: 100px;
}
/* you don't need this, just for this pepsi logo which is huge */
#logo img {
max-width: 200px;
}
<div class="logo">
<a id="logo" href="http://test.rudtek.com" title="test">
<img class="logo-main scale-with-grid" src="https://s-media-cache-ak0.pinimg.com/originals/f7/aa/ed/f7aaed9fcacfe6df89cef0a16cf06266.png" alt="seasons_management_logo">
</a>
<div class="containerBox">
<img class="img-responsive" src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="text-box">
<p class="dataNumber">Home 4</p>
</div>
</div>
</div>
Michael beat me to it, but here's another method.
https://codepen.io/anon/pen/VpErXP
.logo {
position: relative;
max-width: 960px;
margin: 0 auto;
}
#logo {
position: absolute;
top: 80px;
left: 0;
z-index: 99;
}
#logo img {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 30%;
text-align: center;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
margin: auto;
padding: auto;
}
.dataNumber {
margin-top: auto;
}
I have this text on top of an image. When I hover on the text, the hover I created for the background image doesn't work. Would anyone have a solution for this?
JSfiddle:
https://jsfiddle.net/marineboudeau/h177pdne/4/
<div class="card">
<a href="#">
<div class="background-container">
<div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div>
</div>
</a>
<a href="#" class="headline link--no-decor">
<h2>Headline</h2>
</a>
</div>
And the CSS:
.card {
width: 300px;
height: 200px;
}
a {
text-decoration: none;
}
h2 {
color: white;
font-family: Helvetica, sans-serif;
}
h2:hover {
color: yellow;
}
.headline {
padding: 0 22px;
position: relative;
margin-top: -80px;
display: flex;
flex-direction: row;
align-items: center;
}
.background-container {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.background-container:after {
content: "gradient mask for image";
overflow: hidden;
position: absolute;
text-indent: -9999rem;
font-size: 0;
line-height: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(20deg ,rgba(0,0,0,.8), rgba(0,0,0,0));
}
.background-container:hover:after {
background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6));
border: 2px solid red;
}
.background {
height: 200px;
}
Thanks!
Move <a href="#" class="headline link--no-decor"> into the backround element, so it won't block the hover event.
To prevent the .background-container:after from block the a.headline hover, we need to assign position: relative, and z-index: 1 to a.headline.
.card {
width: 300px;
height: 200px;
}
a {
text-decoration: none;
}
h2 {
color: white;
font-family: Helvetica, sans-serif;
}
h2:hover {
color: yellow;
}
.headline {
position: relative;
z-index: 1;
padding: 0 22px;
position: relative;
margin-top: -80px;
display: flex;
flex-direction: row;
align-items: center;
}
.background-container {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.background-container:after {
content: "gradient mask for image";
overflow: hidden;
position: absolute;
text-indent: -9999rem;
font-size: 0;
line-height: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(20deg ,rgba(0,0,0,.8), rgba(0,0,0,0));
}
.background-container:hover:after {
background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6));
border: 2px solid red;
}
.background {
height: 200px;
}
<div class="card">
<a href="#">
<div class="background-container">
<div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div>
<a href="#" class="headline link--no-decor">
<h2>Headline</h2>
</a>
</div>
</a>
</div>
Istead of setting hover on the .background-container:hover:after add hover on this .card:hover selector and select background-cointainer like this .card:hover a .background-container:after
This should work,
.card:hover a .background-container:after {
background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6));
border: 2px solid red;
}
Check out the full code
.card {
width: 300px;
height: 200px;
}
a {
text-decoration: none;
}
h2 {
color: white;
font-family: Helvetica, sans-serif;
}
h2:hover {
color: yellow;
}
.headline {
padding: 0 22px;
position: relative;
margin-top: -80px;
display: flex;
flex-direction: row;
align-items: center;
}
.background-container {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.background-container:after {
content: "gradient mask for image";
overflow: hidden;
position: absolute;
text-indent: -9999rem;
font-size: 0;
line-height: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(20deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}
.card:hover a .background-container:after {
background: linear-gradient(20deg, rgba(255, 0, 0, .6), rgba(255, 255, 0, .6));
border: 2px solid red;
}
.background {
height: 200px;
}
<div class="card">
<a href="#">
<div class="background-container">
<div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div>
</div>
</a>
<a href="#" class="headline link--no-decor">
<h2>Headline</h2>
</a>
</div>