I want to have a hover animation that disappears when hovering over the picture and another picture takes its place, but the back picture isn't disappearing
I tried to use opacity 1 to go to 0, and transition time 0.5sec but it's stuck in the old position
.Menu .mnpic {
transform: translateX(30%);
/* display: flex;
justify-content: center;
align-content: center; */
}
.mnovly {
position: absolute;
top: 0;
}
.mwhite{
/* position: relative; */
opacity: 1;
transition: 0.5s;
}
.mwhite:hover {
opacity: 0;
}
.mblack{
opacity: 0;
transition: 0.5s;
}
.mblack:hover{
opacity: 1;
height: 200px;
}
<div class="mnpic">
<img calss="mwhite" src="menuwhite.png" alt="" height="150px">
<div class="mnovly">
<img class="mblack" src="menublack.png" alt="" height="150px">
</div>
</div>
This is happening because the front picture is always over the back picture so the .mwhite:hover never triggers, also you have a typo in your html, change that calss="mwhite" to class="mwhite"
I had to change your HTML and CSS styles to make it work, I placed the front picture always in front and used this CSS selector to activate when hovering on the front picture .mwhite:hover + .mblack
In the example I added a border and the images are not exactly over each other so the effect is more noticeable:
.Menu .mnpic {
transform: translateX(30%);
}
.mwhite{
opacity: 1;
transition: 0.5s;
border: 1px green solid;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.mwhite:hover {
opacity: 0;
border: 1px blue solid;
}
.mblack{
border: 1px red solid;
opacity: 0;
transition: 0.5s;
}
.mwhite:hover + .mblack{
opacity: 1;
height: 200px;
}
<div class="mnpic">
<img class="mwhite" src='https://picsum.photos/200' alt="" height="150px">
<img class="mblack" src='https://picsum.photos/300' alt="" height="150px">
</div>
.hover {
width: 200px;
height: 200px;
background: url('https://picsum.photos/200') no-repeat center center;
position: relative;
}
.hover:after{
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url('https://picsum.photos/300') no-repeat center center;
opacity: 0;
transition: opacity .3s;
}
.hover:hover:after {
opacity: 1;
}
<div class="hover"></div>
Related
Hi so I'm quite new to programming and I have a basic knowledge in html and an even more basic knowledge of CSS. I've been trying to make images for my wordpress.com website that when hovered over by the cursor change to an overlay with text. I've managed to find some samples for what I want and I've gotten pretty close. The only thing I don't know how to do is make it so my image is also a hyperlink because currently all it has is the hover effect.
Here is my CSS code:
.container {
position: relative;
width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.projeto01 {
color: white;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
Here is my html code:
<div class="grid-portefolio">
<div class="container">
<img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/>
<div class="overlay">
<div class="projeto01">Albert Lee<br>Banks Electorate</div>
</div>
</div>
So to summarize I want to know what to add to my code in either CSS or html to make it so the image also acts as a hyperlink to another page.
Just wrap everything inside an <a> tag, like this:
<div class="container">
<a href="https://example.com/"><img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/>
<span class="overlay">
<span class="projeto01">Albert Lee<br>Banks Electorate</span>
</span>
</a>
</div>
I think it can help you.
.page-link {
position: relative;
width: 400px;
display: flex;
overflow: hidden;
}
.page-link img {
width: 100%!important;
height: auto;
transform: scale(1);
transition: transform .4s ease;
}
.projeto01 {
color: white;
font-size: 40px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 135, 186, .6);
opacity: 0;
transition: opacity .4s ease;
}
.page-link:hover {
cursor: pointer;
}
.page-link:hover img {
transform: scale(1.1);
}
.page-link:hover .projeto01 {
opacity: 1;
}
<div class="grid-portefolio">
<a class="page-link" href="https://www.example.com">
<img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" alt="Albert Lee Banks Electorate"/>
<div class="projeto01">Albert Lee<br>Banks Electorate</div>
</a>
I'm trying to achieve a drop down cover effect (Not sure how it's really called) with the following code:
.new_events_list {
position: absolute;
width: 26%;
height: 28vh;
background-color: #323642;
cursor: pointer;
}
#new_events_list_effect {
background-color: #ee5f95;
width: 100%;
opacity: 0.5;
top: -100%;
transition: 0.5s;
}
div.new_events_list:hover #new_events_list_effect {
top: 0%;
transition: 0.5s;
}
div.new_events_list:hover img {
filter: grayscale(0.5);
transition: 1s;
}
<div class="new_events_list" style="overflow: hidden;border-radius: 10px;">
<img class="new_events_list" id="photo1" src="https://www.dpreview.com/files/p/articles/7395606096/Google-Photos.jpeg" alt="event_list_1" style=" object-fit: cover; width: 100%;border-radius: 10px;">
<div class="new_events_list" id="new_events_list_effect">
</div>
</div>
The problem that I'm facing is that once you hover over the photo the pink block drops down with the corners visible which only disappear after a second or so. Could anyone explain to me how I could possibly drop down the pink coloured div without the corners being visible?
Thank you very much for your help in advance.
The following code should work:
.new_events_list {
position: relative;
width: 26%;
backgorund-color: black;
border-radius: 10px;
overflow: hidden;
}
.image {
width: 100%;
}
.new_events_list_effect {
position: absolute;
height: 100%;
width: 100%;
background-color: #ee5f95;
opacity: 0.5;
top: -100%;
transition: 0.5s;
border-radius: 10px;
}
.new_events_list:hover .new_events_list_effect {
top: 0%;
transition: 0.5s;
}
<div class="new_events_list">
<img src="https://www.dpreview.com/files/p/articles/7395606096/Google-Photos.jpeg" class="image">
<div class="new_events_list_effect"></div>
</div>
I am having a problem with an element when I use the translate-y in active state, it makes the background-image disappear. Click the element and you will see the image disappear.
The Css:
.glyphsblock i {
display: inline-block;
position: relative;
width: 38px;
height: 38px;
background-size: contain;
background-repeat: no-repeat;
background-position: center, center;
border: 1px solid #fff;
margin: 1px;
flex-shrink: 0;
cursor: pointer;
transition: all ease 0.1s;
}
.glyphsblock i:before {
background: radial-gradient(#8ed3c8, #224945);
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.glyphsblock i:active {
transform: translateY(2px);
}
.glyph-A {
background-image: url(https://atlasdatabase.github.io/glyphs/a.png);
}
HTML Code:
<div class="glyphsblock">
<i class="glyph-A"></i>
</div>
Also a jsfiddle of the issue: https://jsfiddle.net/go0tbb53/
Refactor your CSS to remove the negative z-index, which can produce unpredictable results. This is what was causing the transform to glitch and hide the glyph icon.
I've adjusted your snippet so now the i itself has the radial gradient, and the ::before pseudo-element is laying the glyph graphic on top of it.
You can see it working below:
.glyphsblock i {
background: radial-gradient(#8ed3c8, #224945);
display: inline-block;
position: relative;
width: 38px;
height: 38px;
border: 1px solid #fff;
margin: 1px;
flex-shrink: 0;
cursor: pointer;
transition: all ease 0.1s;
}
.glyphsblock i::before {
background-size: contain;
background-repeat: no-repeat;
background-position: center, center;
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.glyphsblock i:active {
transform: translateY(2px);
}
.glyph-A::before {
background-image: url(https://atlasdatabase.github.io/glyphs/a.png);
}
<div class="glyphsblock">
<i class="glyph-A"></i>
</div>
This may not be totally conventional, but I changed your jsfiddle to use a sized div for the background and an image for the icon itself. If you want to use multiple icons, simply make a larger wrapper div for multiple of what is currently called glyphsblock.
Also, my solution doesn't have any javascript, which is helpful :)
.bg-grad {
background: radial-gradient(#8ed3c8, #224945);
width: 38px;
height: 38px;
z-index: -1;
position: absolute;
}
.glyphsblock:active {
transform: translateY(2px);
cursor: pointer;
transition: all ease 0.1s;
}
<div class="glyphsblock">
<div class="bg-grad">
</div>
<img src="https://atlasdatabase.github.io/glyphs/a.png" height=38px width=38px/>
</div>
I have two images, but I just want to show one of them. if I hover, it will change the image.
.sidenav {
height: 100%;
/* 100% Full-height */
width: 100px;
position: fixed;
/* Stay in place */
z-index: 2;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
transition: 0.8s;
opacity: 0.8;
box-shadow: 0px 20px 50px black;
}
.sidenav:hover {
width: 215px;
transition: 0.8s;
overflow: hidden;
}
.sidenav img {
height: 10%;
width: auto;
padding-left: 13px;
transition: 0.8s;
}
.hovered {
visibility: hidden;
opacity: 0;
height: 13% !important;
transition: 0.5s;
}
.sidenav:hover img:first-child {
visibility: hidden;
opacity: 0;
}
.sidenav:hover .hovered {
visibility: visible;
opacity: 1;
}
<div class="sidenav">
<img src="../img/10.png">
<img src="../img/logo1.png" class="hovered">
</div>
My question is, how to hide the second image element? i can hide the image but it create a blank space. I dont used display: none; because I used transition. Any suggestion for me? thanks before
You should go for CSS as long as its possible. And fortunaterly for your requirement the use of CSS is totally possible.
I did that earlier for one of my similar requirement.
HTML :
<a class="foo" href="#">
<img src="http://lorempixel.com/400/200/food/1/" />
<img src="http://lorempixel.com/400/200/food/2/" />
</a>
CSS :
.foo img:last-child {
display: none
}
.foo:hover img:first-child {
display: none
}
.foo:hover img:last-child {
display: inline-block
}
JSFiddle : http://jsfiddle.net/nikdtu/9zcvsewr/
hovered image add position: absolute; with top: ...; left: ...
And second image will be above first image. You can manipulate positioning with top, left parameters.
you can use position:absolute for second image.
below is an example, I have used dummy images in this snippet
.sidenav {
height: 100%; /* 100% Full-height */
width: 100px;
position: fixed; /* Stay in place */
z-index: 2;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden; /* Disable horizontal scroll */
padding-top: 20px;
transition: 0.8s;
opacity: 0.8;
box-shadow: 0px 20px 50px black;
}
.sidenav:hover{
width: 215px;
transition: 0.8s;
overflow: hidden;
}
.sidenav img{
height: 10%;
width: auto;
padding-left: 13px;
transition: 0.8s;
}
.hovered {
visibility: hidden;
opacity: 0;
height: 13% !important;
transition: 0.5s;
position:absolute;
top:20px;
left: 0;
}
.sidenav:hover img:first-child{visibility: hidden; opacity: 0;}
.sidenav:hover .hovered{visibility: visible; opacity: 1;}
<div class="sidenav">
<img src="https://dummyimage.com/qvga">
<img src="https://dummyimage.com/skyscraper/f0f/f" class="hovered">
</div>
Avoid the overhead of jquery if all you need is this small change.
Modify the given CSS definitions to these definitions. Then modify the HTML as show.
.sidenav {
height: 100%;
/* 100% Full-height */
width: 100px;
position: fixed;
/* Stay in place */
z-index: 2;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
transition: 0.8s;
opacity: 0.8;
box-shadow: 0px 20px 50px black;
}
.sidenav:hover {
width: 215px;
transition: 0.8s;
overflow: hidden;
}
.sidenav .hover_image {
height: 10%;
width: 90px;
padding-left: 13px;
background-image: url('https://dummyimage.com/90x20/1b0/242499.png&text=Regular');
background-position: left top;
background-repeat: no-repeat;
}
.sidenav:hover .hover_image {
height: 13% !important;
width: 205px;
background-image: url('https://dummyimage.com/205x28/cb0/242499.png&text=Hovered');
}
<div class="sidenav">
<div class="hover_image"> </div>
</div>
Adjusting the height and width for the proper image size and checking the proper path is something you'll need to do. This must be the 'real' image size since it will not be scaled by the browser. (You are using pre-scaled, compressed images already, right?)
I want this effect for my image.
I implemented it but I have anchor at the place of figure and when I hover on image I should able to click on it and it should redirect. Will we achieve it?
I use the following code for the hover effect:
.tint {
position: relative;
float: left;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
}
.tint:before {
content: "";
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: none;
transition: all .3s linear;
}
.tint:hover:before { background: rgba(0,0,255, 0.5); }
If I remove position:absolute, the link starts working but then the hover effect is gone.
Please help me with this if anybody has any solution for this.
Thanks in advance.
you can try something by the meanings of this code:
<div>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<div class="mask">
</div>
</div>
<style>
.mask { position: absolute;
height: 100%;
width: 100%;
transition: all 0.6s ease;
left: 0;
top: 0;
background-color: #0af;
opacity: 0;
}
.mask:hover {
background-color: #0af;
opacity: 0.3;
}
</style>