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>
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
I'd like to create a round image from a rectangular image using radius-border.
Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.
See failed attempts here:
http://jsfiddle.net/v8g3y0na/
.rounded-corners-2{
border-radius: 100px;
height: 150px;
width: 150px;
Can this be done in only CSS.....?
You do that by adding a parent div to your img and the code flows as follows
figure{
width:150px;
height:150px;
border-radius:50%;
overflow:hidden;
}
Updated Demo
Round image using CSS object-fit and border radius:
img{
width:80px;
height:80px;
border-radius: 50%;
object-fit: cover;
}
<img src="https://picsum.photos/id/1011/800/400">
img with background image
For older browsers, using the <img> tag
<img alt="My image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
style="background: url(https://picsum.photos/id/1011/300/180) 50% / cover;
border-radius: 50%;
width:150px;">
The trick is to set a transparent px for the src (to prevent broken image icon) and do the best CSS3 and background-size has to offer (cover).
Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.
Yes, and you can also avoid using parent elements by just setting the image as the background. You can also position the image as you wish by using the background-position attribute.
Updated to address concerns about size, roundness, skewing and dynamically loaded content.
setTimeout(function() {
$("#image").css("background-image", "url(https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97350&w=150&h=350)");
}, 3000);
#image {
display: block;
background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
border-radius: 200px;
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" />
http://jsfiddle.net/o8fwpug5/37/
This is a slight update of a previous answer. I liked the other answer, but this is a bit more streamlined and gives a pixel based width for the wrapper. This way it is easier to see and change the dimensions for your own purposes.
HTML:
<div><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></div>
CSS:
div{
height:200px;
width:200px;
position:relative;
border-radius:100%;
overflow:hidden;
}
img{
position:absolute;
left:-50%; right:-50%; top:0;
margin:auto;
height:100%; width:auto;
}
Put a DIV frame around the image: DEMO
<div class="rounded-corners">
<img src="http://welovekaleycuoco.com/wp-content/uploads/2013/11/Kaley-Cuoco-Wallpapers-81.jpg" width="200">
</div>
div.rounded-corners {
height: 150px;
width: 150px;
border-radius: 50%;
overflow: hidden;
}
note: you don't need your img.rounded-corners style anymore
I need to implement a design to my webpage butI am kind of newbie with CSS.
What I am trying is to add a frame above the user picture. For example, for any size of image, I want that a given profile image like:
... I want to add a rectangle with a transparent circle inside like:
... so the final result would be like:
I am currently adding this frame as an image an resizing the user's image but it decreases resolution.
I really need the frame height size to be equal the image height size and put a frame and circle according to the user image.
Any Ideas?
Here try this DEMO. To check transparency, try changing body color.
<div class="outerCont">
<div class="innerCont centerAlign">
<img src="http://i.stack.imgur.com/FjDS6.png"/>
</div>
</div>
.outerCont{
height:300px;
width:300px;
position:relative;
overflow:hidden;
}
.innerCont{
background-color:transparent;
border:150px solid rgb(186, 230, 255);
border-radius:50%;
height:200px;
width:200px;
overflow:hidden;
}
.innerCont img{
position:absolute;
height:80%;
bottom:0;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
.centerAlign{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}
Well, there are 2 ways:
1)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic.jpg" class="profile_pic" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background-color: #d2e8f7; /* light blue */
padding: 5px;
}
.profile_pic {
border-radius: 9999px;
}
or
2)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic_frame.png" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background: #fff url('./img/profile_pic.jpg') no-repeat top left;
}
HERE IS THE JSFIDDLE
.circle {
background-color:#fff;
border-radius: 50%;
width: 250px;
height: 250px;
text-align:center;
background-image:url('http://i.imgur.com/NGz1YlF.png');
background-repeat:no-repeat;
background-size:65%;
background-position:center bottom;
}
You should draw the square, then the circle on top of it and finally put the image, this will produce the result you want.
Check there for how to trace a circle in CSS.
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.