I'm working with a CSS Overlay for an image, trying to get text to display when the image is hovered. I have it working, but for some reason, the text is also all appearing as a blob above the gallery. I think it's to do with the position tag I'm using, but I'm not sure how to reproduce exactly. Code below + CSB:
https://codesandbox.io/s/eager-moore-qeki7
gallery
{
data.map((edge) => (
<div key={edge} className={styles.imgHov}>
<Img
fluid={edge.node.data.one}
className={styles.image}
/>
<div className={styles.overlay} key={edge}>
<p className={styles.text}>{edge.node.data.item_one}</p>
<p className={styles.text}>{edge.node.data.item_two}</p>
</div>
</div>
))
}
css
.imgHov:hover{
position: relative;
}
.image{
width: 25vw;
height: 25vw;
object-fit: cover;
}
.overlay{
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}
I translated your app in normal HTML, i think this should meet your requirements :)
.imgHov{
position: relative;
width: 25vw;
height: 25vw;
}
.image{
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay{
display: none;
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}
.imgHov:hover .overlay {
display: block;
}
<div class="imgHov">
<img class="image" src="https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg"/>
<div class="overlay">
<p class="text">item one</p>
<p class="text">item two</p>
</div>
</div>
Can anyone help me? mix blend is affecting my nav bar and a picture of the shoe. I want to bring them to the front. I tried with z-axis but it doesn't work.
<section>
<img src="slike/bg.jpg" id="bg">
<img src="slike/moon.png" id="moon">
<img src="slike/mountain.png" id="mountain">
<img src="slike/road.png" id="road">
<img src="slike/road.png" id="road">
<img src="slike/Untitled-1.png" id="shoe">
<h1 id="text">AIRMAX</h1>
</section>
section{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
}
section:before{
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #0a2a43, transparent);
z-index: 10000;
}
section:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0a2a43;
z-index: 10000;
mix-blend-mode: color;
}
section img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
#text{
position: relative;
color: #fff;
font-size: 10em;
z-index: 2;
text-align: center;
padding: 100px;
font-family: 'Nunito', sans-serif;
}
#road{
z-index: 2;
}
I made a parallax effect, so I have 5 images stacked on top of each other with mix blend mode. The sixth picture "untitled-1" should be on top of this blend mode. I don't know if this is possible so I came here for help. The blend mode is also affecting my nav bar but the nav bur is outside of the section that has bland mode on it.
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.
I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.
I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.
Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)
The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.
.container {
border: 1px solid red;
width: 100%;
}
.content {
height: 1000px;
background-color: lightblue;
padding: 50px;
}
.top {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
top: 0;
}
.left {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
left: 0;
top: 0;
bottom: 0;
}
.right {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
right: 0;
top: 0;
bottom: 0;
}
.bottom {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
bottom: 0;
}
<section class="container">
<section class="content">
this is my content...
</section>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</section>
Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.
body,
html {
margin: 0;
padding: 0;
}
.container {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
background-color: lightblue;
overflow: hidden;
}
.wrapper2 {
overflow-y: scroll;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-right: -20px;
padding: 20px;
}
.content {
height: 1000px;
}
<div class="container">
<div class="wrapper">
<div class="wrapper2">
<div class="content">
This is my content...
</div>
</div>
</div>
</div>
my problem is quite simple. I need the diagonal line in the background image to align with the "X" in the logo and make it stay there no matter how wide the viewport is. I tried to achieve it with css only but with no result. It´s gonna need some javascript I suppose but I have no idea where to start.
<body>
<header>
<div class="container">
<svg class="logo"></svg>
</div>
</header>
</body>
* {
box-sizing: border-box
}
body {
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
header {
opacity: 1;
height: 135px;
line-height:135px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
transition: all 0.3s;
z-index: 1000;
text-align: center;
}
.container {
width: 100%;
max-width: 1200px;
line-height: 135px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
padding: 0 80px;
}
.logo {
max-width: 200px;
float: left;
}
http://codepen.io/easynowbaby/pen/qdLbgP
Thanks!
looks like what you want is to play around with the background position, try something like this,
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center -110px;