I have a simple HTML form with a submit button within. The body has a background image:
I want to show another div with the image inherited from body like this:
The second div has absolute position and as you see, an inherited background image (or transparent color) from body:
How can I manage to this?
Thanks
use background-attachment:fixed and apply the same background to the arrow and the body:
.box {
width:40%;
height:100vh;
margin-left:auto;
border:2px solid;
box-sizing:border-box;
background:#fff;
}
body {
margin:0;
background:url(https://picsum.photos/id/1016/800/800) center/cover fixed;
}
.arrow {
position:absolute;
height:50vh;
right:30%;
top:calc(50% - 25vh);
border-radius:17%;
background:url(https://picsum.photos/id/1016/800/800) center/cover fixed;
}
<div class="box">
</div>
<img src="https://i.stack.imgur.com/Yr00Q.png" class="arrow">
Related
Is it possible to have multiple mix-blend-modes to create different div background layers?
Currently, the body has a fixed background image. There is a div (main container) which uses mix-blend-mode:soft-light and the background-color:white which creates a layer above the body image.
I am adding a div inside of the main container, which will use the same, mix-blend-mode:soft-light in order to create a new layer on top. Instead, it is displaying the same colour as the main container, instead of a further overlaid colour.
HTML
<body>
<div class="container">
<div id="headerBackground"></div>
</div>
</body>
CSS
body {
background-color: #21224f;
background-image:url('https://i.ibb.co/chww3Zd/bg.jpg');
width:100vw;
height:100vh;
background-repeat:no-repeat;
background-size:cover;
margin:0;
max-height:100vh;
overflow:hidden;
}
/* inner section - background */
.container{
max-width:1280px;
width:100vw;
background-color:#fff;
mix-blend-mode:soft-light;
height:100vh;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
border-radius:20px;
}
#headerBackground{
height: 140px;
background-color: #fff;
width: 1280px;
mix-blend-mode: soft-light;
border-radius:20px;
}
JS Fiddle -> https://jsfiddle.net/9cjgtwbp/4/
Here is a link to the desired effect -> https://i.ibb.co/nwZP9sG/000-wireframe-dark.jpg
Here is how it currently looks -> https://i.ibb.co/SKX3xSH/Screenshot-2022-04-11-at-14-49-24.png
Any help or guidance would be greatly appreciated!
I have an image that isn't as big as all screen sizes, yet I want it to be displayed on screens with whatever width by adding a repeated pattern on either side. I can of course make the image a lot wider but that would cause the page to load a lot slower as well.
It's a bit hard to explain by text so here are some images and the JSFiddle Demo.
#layer_top {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
height:136px;
}
#layer_transition {
width:100%;
height:36px;
margin-top:-36px;
background-image:url("http://puu.sh/cajG0/2768274649.png");
background-repeat:no-repeat;
background-position:center;
}
#layer_bottom {
width:100%;
height:100px;
background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
}
<div id="layer_top"></div>
<div id="layer_transition"></div>
<div id="layer_bottom"></div>
Result:
Wanted Result:
You could achieve that by adding a pseudo-element to the top layer which is formed as ellipse and it's positioned with the respect of the layer.
Then simply apply the same background image to both, layer and the pseudo-element:
Example Here
#layer_top, #layer_top:after {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
}
#layer_top { width:100%; height:136px; position: relative; }
#layer_top:after {
content: "";
position: absolute;
z-index: -1;
width: 500px; height: 100%;
left: 0; right: 0; top: 20%;
margin: auto;
border-radius: 50%;
}
You could also use clip to cut the extra part of the oval shape.
A bit of a different solution but it might just work:
Why don't you replace the mask image? So instead of overlaying this gray thing, make an overlay for the purprle one. If you position that centered against the top of the grey area, you've got the same result/
Well, the problem is with the div elements you created its hard to get it work.
An easy solution is to use for the bottom part 3 diffrent divs.
<div id="side_layer"></div>
<div id="layer_bottom"></div>
<div id="side_layer"></div>
I created a simple jsfiddle for you: jsfiddle
It does work responsive until 500px width.
You could simply add a media query and hide the right and left layer then.
You can do this it is easy.
Add CSS class to body or create parent div above body and style it.
Working Fiddle
http://jsfiddle.net/7n06und5/11/
.parent {
margin:0;
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
}
#layer_top {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
height:136px;
}
#layer_transition {
width:100%;
height:36px;
margin-top:-36px;
background-image:url("http://puu.sh/cajG0/2768274649.png");
background-repeat:no-repeat;
background-position:center;
}
#layer_bottom {
width:100%;
height:300px;
background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
width:500px;
margin:0 auto;
}
HTML
<body class="parent">
<div id="layer_top">
</div>
<div id="layer_transition">
</div>
<div id="layer_bottom">
</div>
</body>
Hope it helps you!
you can try this with css border-raidus
HTML
<div id="header">
<div id="inner"></div>
</div>
CSS
#header{
background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
//height:75px;
//width:100%;
padding:3% 15%;
}
#inner{
background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
height:75px;
width:100%;
border-radius:0 0 50% 50%;
}
Fiddle Demo
If I hover over a image, then display another image on that same image.
Above image of plane is original image and swapped text is cross transparent image.
If I hover on image of plane then I want to show another image of swapped
The best way to achieve what you are trying to do is to use use jQuery. Please see below:
$("#ImageID").mouseover(function(){
$("#ImageID").attr("src","new/url/goes/here.jpg");
});
$("#ImageID").mouseout(function(){
$("#ImageID").attr("src","old/url/goes/here.jpg");
});
I hope this helps!
try this code:
<style type="text/css">
.izo {
background: url(http://img1.jpg) no-repeat 50% 50%;
display: block;
width: 400px;
height: 400px;
}
.izo:hover {
background: url(http://img2.jpg) no-repeat 50% 50%;
} </style>
Try using this, it allow you to show overlay image without changing original image
<div class="pic-container">
<div class="pic-box"><img src="img_original.jpg"></div>
<div class="pic-box pic-hover"><img src="img_original.jpg"></div>
</div>
& style
<style>
.pic-container{display:block; width:200px; height:200px; position:relative;}
.pic-container .pic-box{display:block; width:200px; height:200px;}
.pic-container .pic-box img{display:block; width:200px; height:200px;}
.pic-container .pic-hover{position:absolute; top:0; left:0; display:none;}
.pic-container:hover .pic-hover{display:block;}
</style>
I want to built a simple landing page with a header,footer and an image - exactly between the header and the footer (horizontally/vertically centered).
The space between the header/footer and the image should be the same and should depend from the height of the browser-window.
The image has a fixed width (900px) and a fixed hight (600px).
Aw: it is a sticky footer
I have tried something like this:
{display:block; padding:0 40px; width:900px; margin:0 auto; vertical-align:middle;}
my html:
<div class="fbg">
<div class="fbg_resize">
<img src="images/image.png" width="900" alt="" />
</div>
<!--<div class="clr"></div>-->
to get it horizontally centered:
.fbg_resize { margin:0 auto; padding:0 40px; width:900px;}
here is the code that matters:
http://jsfiddle.net/SFWBL/
Have a look at this fiddle for the basic premise, it should be enough to get you started.
HTML
<div id='header'></div>
<div id='image'></div>
<div id='footer'></div>
CSS
html, body{
text-align:center;
height:100%;
width:100%;
margin:0;
padding:0;
}
#header, #footer{
height:50px;
width:100%;
}
#image{
height:50px;
width:50px;
margin:-25px auto 0 -25px;
background:grey;
position:absolute;
top:50%;
left:50%;
}
#header{
background:blue;
}
#footer{
position:absolute;
bottom:0px;
background:red;
}
Instead of using an img, you can try background-image for the div
html, body {
height: 100%;
}
.fbg {
background-image: url(http://lorempixel.com/900/600);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
See modified JSFiddle
Relative (percentage) positions are the way to get your elements to recognize the size of the browser window. Since they work on the edges (top, left), you have to use a negative margin to move the item back up half the height of your item. Since you know the fixed height of your image is 600px, you need -300px. You want to give your image:
position: absolute;
top: 50%:
margin-top: -300px;
I have a few pictures that that works as a link and I want to give hover effect to them, so in hover a play button appear over them. To do so, I made a class and gives a background img for the hover but it does not work.
.img:hover {
background:url(http://i40.tinypic.com/i3s4dc.png);
}
Here is what I have done: http://jsfiddle.net/nkEpd/
You cannot add a background-image to an image tag, as it would be invisible since there is already an image overlaying your background.
What you want to be doing is adding a second div on top of your image which would on hover display the background image.
The key would be to add the html like such:
<a href="/">
<div class="container">
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<div class="overlay"></div>
</div>
</a>
the css:
.container{
position:relative;
width:184px;
height:104px;
}
.img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
}
.overlay:hover{
background:url(http://i40.tinypic.com/i3s4dc.png);
}
Fiddle here: http://jsfiddle.net/nkEpd/13/
I got a method as well:
http://jsfiddle.net/nkEpd/28/
HTML
<a href="/" class="gallerypic">
<img src="http://i42.tinypic.com/2v9zuc1.jpg" class="pic" />
<span class="zoom-icon"><img src="http://i40.tinypic.com/i3s4dc.png"></span>
</a>
CSS
a.gallerypic{
position:relative;
display:block;
float:left;
}
a.gallerypic span.zoom-icon{
visibility:hidden;
position:absolute;
left:0%;
top:15%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
a.gallerypic:hover span.zoom-icon{
visibility:visible;
}
Tried to solve it with no js and no extra markup. Here's my solution adding a pseudo-element to the anchor tag so that when it's hovered the pseudo-element background shows up.
You just need to adapt its height to your "play" button's png height so that it gets proper dimensions.
http://jsfiddle.net/gleezer/jmXdh/1/
The HTML stays the same as in your fiddle, no extra elements, the css is like so:
a{
position: relative;
}
a:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
height: 100px;
position: absolute;
left: 0;
}
Maybe something as simple as THIS
<a href="/">
<img src="http://i42.tinypic.com/2v9zuc1.jpg"
onmouseover="this.src='http://news.cnet.com/i/bto/20080112/small_car.jpg'"
onmouseout="this.src='http://i42.tinypic.com/2v9zuc1.jpg'"/>
</a>
Only thing you need to do, it to use the same image with play button on it as a second image.
You can change the image on hover by using
img:hover{content:url("hoverimg.jpg");}
your other option is to have a blanket over the image, and apply a background-image to it on hover. The blanket will need to be absolutely positioned to cover the underlying image.
#blanket{position:absolute;top:0;bottom:0;left:0;right:0;}
#blanket:hover{background-image:url('hoverimg.jpg');}
here's an update of your fiddle http://jsfiddle.net/nkEpd/30/
try this:
a{
display:block;
width:184px;
height: 104px;
}
a:hover {
background:url(http://h.hiphotos.baidu.com/album/w%3D310%3Bq%3D75/sign=4e5a4bd9b219ebc4c0787098b21dbec1/adaf2edda3cc7cd9ba7b40653801213fb80e9133.jpg);
background-size: 100%;
}
a:hover .img {
display: none;
}
Please view the demo.