I made my image blurred when you hover over it but every time I try to make the image clickable where it redirects to a new link, the image disappears on Chrome. How can I fix this?
This is the code I have right now for my blurred image:
<div class="textWithBlurredBg2">
<img src="https://taylorsdigigracelim.files.wordpress.com/2014/04/week-4-practical-ex-1.jpg"> </a>
<h2>travel</h2>
</div>
(that's my code in HTML)
.textWithBlurredBg2 {
width: 300px;
height: 200px;
display: inline-block;
margin: 4px;
position: relative;
transform: translate(370px, 200px);
}
.textWithBlurredBg2 img {
width: 100%;
height: 100%;
border-radius: 4px;
transition: .3s;
}
.textWithBlurredBg2:hover img{
filter: blur(2px) brightness(90%);
box-shadow: 0 0 9px #DA70D6;
}
.textWithBlurredBg2 :not(img) {
position: absolute;
top: 30%;
z-index: 1;
color: #fff;
text-align: center;
width: 100%;
}
(That's my code in CSS)
Related
basically all i want to do is: Have a picture and when someone hovers over it i want some text to appear in its position(in the middle to be exact). What I have done so far is make the picture disappear on hover but i cannot get the text to be appeared..
Html:
<div class="container">
<img id="atp "class="atp" src="atp.jpg">
<div class="center">Some text</div>
</div>
Css:
atp{
display:block;
margin-left:auto;
margin-right:auto;
width:27%;
height:50%;}
container{
position: relative;
text-align: center;
}
.center{
position: absolute;
top:50%;
left:50%;
opacity: 0;
}
So basically, what i seek to be done is .atp:hover{opacity:0;} and what I also want is on atp's hover the .center{opacity:1;] So is there a way to put the opacity of center's to 1 when I am in the atp:hover{} code block?
Hope everything looks fine, thanks in advance!
Here is the code. Hope it will help you. if any changes please let me know.
/********* Simple or original overlay *******/
/* Main container */
.overlay-image {
position: relative;
width: 100%;
}
/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}
/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: 30px;
line-height: 1.5em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}
/********* Background and text only overlay on hover *******/
.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.5);
}
<div class="overlay-image">
<a href="LINK_URL">
<div class="normal">
<div class="text">Image + text ORIGINAL</div>
</div>
<div class="hover">
<img class="image" src="https://dummyimage.com/200x150/00ccff/fff.png" alt="Alt text hover" />
</div>
</a>
</div>
#atp {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 27%;
height: 50%;
z-index: 50;
}
.container {
position: relative;
text-align: center;
}
.center {
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
}
#atp:hover {
opacity: 0;
}
try this, using z-index. It worked with me :)
I want to create a landing page like a game. The visitor gets the option either to chose "Professioneel" or "Speels".
Telling it is easy but programming it is hard for me, so this is what I want:
2 div's with 2 different background-image when someone hover over one of the divs I want the background-image to scale (ONLY THE IMAGE) and the opacity placed on the div to change from 50% to 80%.
And a really nice future would be to display a snow falling gif over the image.
This is what I want to create:
Before
After:
What I have achieved till now is making the 2 divs with a background-image and I'm not even sure if that is the right way.
Can someone please help me out?
This is what happens when I hover with my current code: (the whole div scales, not only the image)
As an user asked, here some code:
#containerEntree {
height: 100vh;
width: 1920px;
padding-left: 0;
padding-right: 0;
}
#professioneelContainer {
background-color: red;
text-align: center;
width: 1920px;
height: 475px;
}
#speelsContainer {
background: red;
width: 100%;
height: 475px;
text-align: center;
}
.entreeTekst:hover {
transform: scale(1.2);
}
.entreeTekst {
width: 100%;
height: 100%;
position: relative;
transition: all .5s;
margin: auto;
}
.entreeTekst > span {
color: white;
/* Good thing we set a fallback color! */
font-size: 70px;
position: absolute;
}
<div class="container" id="containerEntree">
<div id="professioneelContainer">
<div class="entreeTekst">
<span>professioneel</span>
<img src="img/professioneel.jpg" />
</div>
</div>
<div id="speelsContainer">
<div class="entreeTekst">
<span>Speels</span>
<img src="img/speels.jpg" />
</div>
</div>
</div>
Please note that I'm still working on it so don't say that this (of course) won't work.
You can do this by using 2 divs with background images and use padding on the div to replicate the aspect ratio of the background image. Scale the image using background-size on :hover. Then use a pseudo element to create the color overlay and transition the opacity on :hover, then use the other pseudo element on top of that with the text and the "snow" gif as a background.
body {
width: 600px;
max-width: 80%;
margin: auto;
}
div {
background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
transition: background-size .25s;
}
.speel {
background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
opacity: .5;
transition: opacity .25s;
}
.pro::before {
background: blue;
}
.speel::before {
background: red;
}
div::after {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
}
.pro::after {
content: 'PROFESSIONEEL';
}
.speel::after {
content: "SPEELS";
}
div:hover::after {
background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
opacity: 0.8;
}
div:hover {
background-size: 150%;
}
<div class="pro">
</div>
<div class="speel">
</div>
You can simply increase the background-size: height width; and opacity: value; property when you hover over an element. You can, if you want to, add some transition to make it smooth. This only scales the background image, not the div itself.
#d {
background-image: url(https://cdn.pixabay.com/photo/2016/10/29/20/52/cincinnati-1781540_960_720.png);
height: 200px;
width: 200px;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
/*To make the transistion smooth*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
opacity: 0.5;
}
#d:hover {
background-size: 110px 110px;
opacity: 0.8;
}
<div id='d'>
</div>
I'm implementing an on-boarding similar to Medium's which has text in the center of the box over an black-overlay with the background-image behind it.
However, I'm struggling with making the text INSIDE the div with the background-image NOT having opacity effect.
<div class="blackBackground">
<div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);">
<p class="text-inside-image">Fashion</p>
</div>
</div>
Here's my CSS:
.blackBackground {
background-color: black;
z-index: -1;
}
.opacityFilter {
opacity: 0.8;
position: relative;
}
.margin-bottom-negsix {
margin-bottom: -6px !important;
}
.topicImage {
padding-bottom: 75%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
position: relative !important;
height:150px;
background-color: rgba(0, 0, 0, 0.8) !important;
}
.text-inside-image {
position: absolute;
top: 20%;
left: 35%;
color: white;
font-size: 24px;
font-weight: 500;
z-index: 1;
}
I've tried several solutions such as CSS - Opaque text on low opacity div?
and How to keep text opacity 100 when its parent container is having opacity of 50
and a couple more, but no luck.
My progress with my JSFiddle is here: https://jsfiddle.net/RohitTigga/akz5zng7/1/
Why is this occurring and how to fix it?
Hi change your HTML like this
HTML
<div class="my-container">
<h1 class="text-inside-image">Fashion</h1>
<img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3">
</div>
CSS
.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
.my-container h1 {
padding: 50px;
text-align: center;
z-index: 2;
position: relative;
color: #fff;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
z-index: 1;
opacity: 0.6;
}
for reference https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview
You have set a translucent background colour on the element and then covered it up with a background image.
If you want the background image to be translucent, use an image that is intrinsically translucent. The PNG image format supports this.
I am trying to achieve two hover effects on an image.
First, when the user hovers over an image a plus icon on the top right corner of the image appears.
Second, when the user hovers over the plus the icon changes to: “Add to collection”.
All these events need to be smooth transitions.
My first problem is I can't get any smooth transitions going for the first hover.
My second problem is I have no idea how to achieve the second hover - I've done a lot of Google searches but this doesn't seem to be a common effect.
Here is the code I have tried so far (with fill murray placeholder image):
HTML:
<div class="item">
<a href="#" class="item-link">
<img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
</a>
</div>
CSS:
.item-link:hover:before {
content: '';
display: block;
position: absolute;
width: 58px;
height: 58px;
background-image: url('http://i.imgur.com/bWcylV3.png');
border-radius: 50%;
top: 10px;
right: 10px;
}
And here is the js fiddle
Here is the screenshots for what I want to achieve with the second hover:
Just did a little bit changes in your mark up and and find a solution for your issue. Yes, It's not possible to :hover a pseudo-element. Added a new div btn-plus and a span text for convenience. This is done using pure css. Hope this helps :)
.btn-plus:before {
content: '';
display: block;
position: absolute;
width: 58px;
height: 58px;
background-image: url('http://i.imgur.com/bWcylV3.png');
border-radius: 50%;
top: 0px;
right: 30px;
z-index: 1;
}
.btn-plus{
position: absolute;
display: block;
width: 200px;
height: 58px;
top: 30px;
right: 0;
opacity : 0;
transition: all ease .5s;
}
.item-link{
width: 100%;
height: 100%;
display: block;
}
.item-link img{
width: 100%;
}
span.text{
position : absolute;
top: 0px;
right: 0px;
color: #fff;
padding: 15px;
width: 150px;
height: 30px;
border-radius: 30px;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
transition: all ease .5s;
opacity : 0;
}
.item-link:hover .btn-plus{
opacity : 1;
}
.btn-plus:hover span{
opacity : 1;
right: 30px
}
<div class="item">
<a href="#" class="item-link">
<img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
<div class="btn-plus">
<span class="text">Add to list</span>
</div>
</a>
</div>
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);
}