I tried hard but could not find a solution...
I need, just using HTML/CSS to add an image layer over another image on mouseover.
The new layer should not replace the old one, only be summed (because it is semi-transparent).
My problem is: I have multiple different images and on mouseover the same layer should be added to them.
Is this possible?
I tried
<style type="text/css">
.image1
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.image1:hover
{
background: url(http://bridgeditalia.it/wp-content/uploads/2014/07/over.png) no-repeat;
} </style>
but not working :(
Try to change the Z-INDEX on the hover and add some transition.
Here is one option using a wrapping div and a pseudo element
JSfiddle demo
HTML
<div class="img-wrap">
<img src="http://lorempixel.com/output/sports-q-c-200-200-9.jpg" alt=""/>
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/output/animals-q-c-200-200-4.jpg" alt=""/>
</div>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.img-wrap {
display: inline-block;
margin: 25px;
position: relative;
}
.img-wrap:after {
content:"";
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background-image: url(http://bridgeditalia.it/wp-content/uploads/2014/07/over.png);
background-size: cover;
background-repeat: no-repeat;
opacity:0;
transition:opacity .5s ease;
}
.img-wrap:hover:after {
opacity:1;
}
.img-wrap img {
display: block;
}
Related
I’m trying to make an hover effect with an image that increase the size but it doesn’t react everywhere. For other words, how do increase the Hitbox for a image without it actually expanding
Ok, first of all. I tried to use different kinds of scaling, margin, padding, etc. but I just don’t have enough experience
You can set the width and height of the image by doing this into your css file :
your class / attriute{
width:50px;
height:50px;
transition: transform .2s; /* Simple animation */
}
And then you can add this property :
your class / attriute:hover{
transform:scale(2.5);
}
Here are a few ways to enlarge the hit-hover area of an element.
Option 1: large transparent border
img {
border: 50px solid transparent;
}
img:hover {
filter: contrast(0.3);
}
<img src="https://via.placeholder.com/150" />
Option 2: add the image in CSS background: url()
div {
width: 300px;
height: 300px;
background: url(https://via.placeholder.com/150) no-repeat 50% 50%;
}
div:hover {
filter: contrast(.3);
}
<div></div>
Option 3: Target a sibling element
.wrap {
position: relative;
}
.wrap div,
.wrap img {
position: absolute;
}
.wrap div {
width: 300px;
height: 300px;
z-index: 2;
}
.wrap div:hover + img {
filter: contrast(.3);
}
<div class="wrap">
<div></div>
<img src="https://via.placeholder.com/150" />
</div>
I'm wondering if it's possible to reproduce this text effect:
It should appear as if the text highlights were reducing the opacity of the images. I guess what you need is a copy of the background layer getting masked in the shapes/positions of the text highlights. But is there a way to really make these masks automatically resize/reposition according to the lines of text? Or any other way to achieve the effect?
This might better explain what I'm after:
You might be looking for the css property background-attachment: fixed. This does have the caveat that the background will no longer scroll with the page and remain static, but this way you can guarantee the overlap between the element background and the container background remain the same. There is a fix for the scrolling issue via javascript, for a minor overhead cost, depending on how heavy the graphics are for the browser to render/reposition.
Then you simply apply the same background to the background containing element(.wrap in my case) and the text containing element(wrap in my case) and you get your desired effect as shown in your second image.
Then put the mark in a paragraph element and repeat the text twice. Once in the paragraph, once within the mark.
Then set the paragraph to position relative, and the mark to absolute, so they overlap each other perfectly. This is to counteract the wrap being transparent and not showing the text properly, as the text also becoming transparent.
.wrap, .wrap mark {
background-image: url('https://i.imgur.com/hAodNjT.jpg');
background-attachment: fixed;
}
.wrap p {
position: relative;
}
.wrap mark {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.4;
}
img {
width: 300px;
height: auto;
}
.wrap {
padding-top:160px;
position: relative;
width: 400px;
height: 400px;
}
.wrap img {
position:absolute;
top:60px;
z-index:0;
}
.wrap p {
position:relative;
z-index: 1;
}
<div class="wrap">
<img src="https://i.imgur.com/cULI8TG.png">
<p>some text that runs over the image<mark>some text that runs over the image</mark></p>
<p>some other text that runs over the image<mark>some other text that runs over the image</mark></p>
</div>
with a background scroll fix, does introduce more overhead when scrolling
var $affected = $('.wrap, .wrap mark');
let handler = (e) => {
$affected.css({'background-position' : '-'+window.scrollX+'px -'+window.scrollY+'px'});
}
$(window).on('resize scroll', handler);
.wrap, .wrap mark {
background-image: url('https://i.imgur.com/hAodNjT.jpg');
background-attachment: fixed;
}
.wrap p {
position: relative;
}
.wrap mark {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.4;
}
img {
width: 300px;
height: auto;
}
.wrap {
padding-top:160px;
position: relative;
width: 400px;
height: 400px;
}
.wrap img {
position:absolute;
top:60px;
z-index:0;
}
.wrap p {
position:relative;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<img src="https://i.imgur.com/cULI8TG.png">
<p>some text that runs over the image<mark>some text that runs over the image</mark></p>
<p>some other text that runs over the image<mark>some other text that runs over the image</mark></p>
</div>
You can use mark tag of HTML using background color with opacity:
/*custom styling of higlihter*/
mark{
background: rgba(255, 255, 255, 0.38);
color: black;
}
.wrap{
background-image: url("https://image.shutterstock.com/image-illustration/color-splash-series-background-design-260nw-587409425.jpg");
height: 230px;
width: 230px;
}
<div class="wrap">
Do <mark>not forget to buy milk today</mark>
<div>
Note: the mark tag is not supported in Internet Explorer 8 and earlier versions.
Another solution, using background and color on <p> tag with gradient:
.wrap{
background: grey;
color: white;
display: inline-block;
background:url(https://thumbs.dreamstime.com/b/halloween-background-full-moon-creepy-house-flying-bats-halloween-background-full-moon-creepy-house-125024932.jpg);
background-size: cover;
height: 200px;
width: 200px;
}
p{
font-size:20px;
background-image: linear-gradient(to right, #ffffff00, #000000c9 , #ffffff00);
text-align: center;
}
<div class="wrap"><p>Don't play with<p></div>
You can change the color accordingly.
Reference.
I want to create full screen background image within a bootstrap-grid so that it can be responsive.
I created a row and made it to 100% height so that it can fit the entire screen.
Added a 1024*768px resolution image , it perfectly appeared in background but with scroll bars.
I just want to get rid of the scroll bars so that it fit in screen. Here is my html
html,body,.container-fluid{
height:100%;
}
.row{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 100vh;
}
<div class="container-fluid">
<div class="row" >
<img src="retail.jpg">
<div class="col-md-12">
</div>
</div>
</div>
Can someone help me ?
Here is something.
The picture is full screen, and the content is on bottom.
If you remove the content, the scrollbar wont appears.
Bootply: http://www.bootply.com/sFNwejI4ow
CSS:
html,body,.container-fluid{
height:100%;
}
.full{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
HTML:
<div class="container-fluid">
<div class="row full">
<img src="//placehold.it/640x480">
</div>
<div class="row">
<div class="col-md-12">
Custom content
</div>
</div>
</div>
This should by default remove both horizontal and vertical scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>
Sadly, this will also disable scrolling on page.
Alternatively, you can implement Fancy Scrolling. The scrollbar is thinner, looks better on page and has smooth scrolling.
Try this:
Here's the script: Link
Implementation:
First call the plugin on a container.
<script>
$(function() {
$( "#demo" ).customScroll();
});
</script>
Here's the CSS:
.phancy-scrollbar {
width: 5px;
border-radius: 4px;
top: 0;
position: absolute;
background: #ccc;
-moz-transition: opacity .2s;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
transition: opacity .2s;
-webkit-transition-delay: 1s;
opacity: 0;
}
.phancy-scroller .phancy-scrollbar:active, .phancy-scroller:hover .phancy-scrollbar {
opacity: 1;
-webkit-transition-delay: 0s;
}
.phancy-scrollbarbutton {
width: 100%;
border-radius: 4px;
top: 0;
position: absolute;
background-color: #999;
}
Hope this helps. Cheers!!
/* attributes overflow, background-size modified */
html,body,.container-fluid{
height:100%;
overflow: hidden; // -> newly added
}
.row{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain cover; // modified here
width: 100vw;
height: 100vh;
}
plunker demo
I am trying to animate this image properly for a hover in and out.
I have it 90% of the way there. Wor some reason if you hover in and out quickly, you can see the sprite moving in the background
Is there a fix or a better way to do this?
http://www.elevux.org/watermelon/
Thanks!!!
.wrapper {
width:600px;
height:600px;
overflow:hidden;
margin:20px;
}
.watermelon {
width:600px;
height:600px;
background:url(http://www.elevux.org/watermelon/watermelon-sprite.png) left top;
transition:background .5s steps(23, end);
display:block
}
.watermelon:hover {
background-position:-13800px top;
cursor:pointer
}
<div class="wrapper">
<div class="watermelon"></div>
</div>
You should move the transition onto the hover selector, seeing as that is when you want the animation to take place.
https://jsfiddle.net/gzk3mcyr/
.wrapper {
width: 600px;
height: 600px;
overflow: hidden;
margin: 20px;
}
.watermelon {
width: 600px;
height: 600px;
background: url(http://www.elevux.org/watermelon/watermelon-sprite.png) left top;
display: block;
}
.watermelon:hover {
background-position: -13800px top;
cursor: pointer;
transition: background .5s steps(23, end);
}
I want to have an overlay over my image background, in order to see the white text above the image more clearly.
Why won't this solution work ?
HTML:
<div id="myDiv" class="bg1 image-cover">
<p>H</p>
</div>
CSS:
#myDiv {
width: 300px;
height: 300px;
color: #fff;
position: relative;
font-size: 100px;
font-weight: bold;
}
.image-cover:before {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
.bg1 {
background-size: cover;
background: url('https://2zpt4dwruy922flhqyznip50-wpengine.netdna-ssl.com/wp-content/uploads/2014/12/lock-and-stock-photos.jpg');
}
while this one does:
HTML:
<div id="myDiv" class="bg1">
<div class="image-cover">
<p>H</p>
</div>
</div>
CSS:
...
.image-cover {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
...
I think I am misunderstanding the way :before works, but I am not fan of the second solution as it has one more div than the first.
I'm glad you're already aware of the second solution; this tends to be the approach I normally use (though not for any particular reason). You can simply modify your original approach as follows and get the desired effect:
#myDiv > p {
position: relative;
}
Namely, give the nested <p> tag a non-static position value. See here: CodePen
You can just increase the z-index of the text which is to be overlaid over the image like this:
#myDiv{
z-index: 1;
}
#myDiv p{
z-index: 2; /* should be more than the z-index of the background */
}