.pic{
position: relative;
}
.pic .texthover{
position: absolute;
bottom:3%;
display: none;
z-index: 8000;
margin: 0 0 3.2px 0;
width: 100%;
text-align: left;
padding: 5px;
background: rgba(213,12,16,1.00);
border-bottom: 1px solid white;
transition: all 2s ease;
}
.pic:hover .texthover{
display: block;
}
<ul class="list-images">
<li>
<a href="#">
<div class="pic">
<img src="1 escultura.fw.png" width="278" height="175" title="Esculturas del Prado" class="image"/>
<div class="hover" style="">
<p class="texthover"> Escultura neoclasicista hasta el XVII</p>
</div> <!--END DIV HOVER-->
</div> <!--END DIV PIC-->
</li>
I've been racking my brain over this, it must be a very simple detail that escapes my comprehension, can anybody point it out??? Thanks all. I put the transition property in the original element and still not working...
A Vanila Example of Transition and how it works. You can change as per requirements.
div.list-images a:hover {
transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear; /* Firefox 4 */
-webkit-transition: background-color 0.5s linear; /* Safari and Chrome */
-o-transition: background-color 0.5s linear; /* Opera */
-ms-transition: background-color 0.5s linear; /* Explorer 10 */
background:#ff0000;
}
<div class="list-images">transition</div>
Related
I can't share a page on this, due to the page not being public. However, what I'm trying to do is create a hover effect on both a div and a H4 text element. Nothing of which seems to work for me. Here's my code:
HTML:
<div class="grid__item small--one-half medium-up--one-quarter">
<a href="/collections/hoop-earrings" class="collection-item collection-item--overlaid" data-aos="row-of-4"><div class="image-wrap">
<div class="collection-image collection-image--square lazyload" style='background-position: center center; background-image: url("https://cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_720x.jpg?v=1561755337");'>
</div>
</div>
<noscript>
<div
class="collection-image collection-image--square"
style="background-image: url(//cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_400x.jpg?v=1561755337); background-position: center center;">
</div>
</noscript>
<div class="collection-image--overlay-background"></div>
<span
class="collection-item__title collection-item__title--overlaid collection-item__title--heading collection-item__title--center">
<span>
Text Goes Here
</span>
</span>
</a>
</div>
CSS:
.collection-image--overlay-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center {
opacity: 0!important;
-moz-transition: opacity .25s linear;
-webkit-transition: opacity .25s linear;
-o-transition: opacity .25s linear;
transition: opacity .25s linear;
}
#media only screen and (min-width: 768px) {
.collection-image--overlay-background:hover {
z-index: 1;
opacity: .8;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center:hover {
z-index: 1;
opacity: 1;
}
}
I tried making a small snippet. See if it´s what you´re looking for.
Since you´re using the !important flag in one of your opacity rules, all the other changes after the fact will not take effect unless you also use !important. However I would not advice using !important that freely because whenever they are present such errors are a bit harder to track.
.container {
background-color: blue;
height: 100px;
}
.onHover {
background-color: red;
width: 80%;
height: 100px;
margin: 0 auto;
opacity: 0.5;
/*opacity: 0.5 !important; In your code you have
a line like this.*/
}
.onHover:hover {
opacity: 1;
}
<div class="container">
<div class="onHover">
<h4>My title Here</h4>
</div>
</div>
I have an album cover that also has a play button on top of it.
When a user hovers over the album cover, the opacity changes to lighten the image. Likewise, when hovering over the cover, if the user then hovers over the play button, the cover opacity should remain in it's changed state.
The problem is that because I have a transition effect on the opacity, the opacity flickers when hovering back and forth over the cover and the play button.
I created a fiddle to show the issue.
How can I have it so that when initially hovering over the album cover, the opacity transitions, but then hovering over the play button, the opacity simply stays the same without re-transitioning, causing it to flicker?
.play-button-container img:hover,
.play-button:hover + .image {
opacity: .6;
}
.play-button-container img {
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
.play-button {
position: absolute;
top: 10%;
left: 10%;
font-size: 30px;
color: #fff;
z-index: 1000;
background-color: red;
}
<div class="image-container">
<div class="play-button-container">
<div class="play-button">
PLAY
</div>
<div class="image">
<img src="http://papers.co/wallpaper/papers.co-am19-tycho-art-music-album-cover-illust-simple-white-40-wallpaper.jpg" width="350">
</div>
</div>
</div>
https://jsfiddle.net/659z2ndx/1/
When you hover over the play button, you change the opacity of the div with the class image. That is what causes the flicker.
What you should do is change the opacity of the img
.play-button-container img:hover,
.play-button:hover + .image > img {
opacity: .6;
}
.play-button-container img {
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
.play-button {
position: absolute;
top: 10%;
left: 10%;
font-size: 30px;
color: #fff;
z-index: 1000;
background-color: red;
}
<div class="image-container">
<div class="play-button-container">
<div class="play-button">
PLAY
</div>
<div class="image">
<img src="http://papers.co/wallpaper/papers.co-am19-tycho-art-music-album-cover-illust-simple-white-40-wallpaper.jpg" width="350">
</div>
</div>
</div>
I'm trying to combine fading out a colour (that part works fine) but also zoom in a background image smoothly on hover.
Wordpress is outputting the background image inline:
<a href="<?php echo the_permalink(); ?>" class="product-module" style="background-image:url(<?php echo the_field('thumbnail_image'); ?>);" data-equalizer-watch>
<span class="product-overlay">
<h2>
<?php echo get_the_title($post->post_parent); ?><br />
<?php echo the_title(); ?>
</h2>
</span>
</a>
And here's my css:
.product-module {
background-repeat: no-repeat;
background-size:cover;
background-position: center;
width:100%;
min-height:288px;
display:block;
position: relative;
transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
}
.product-module:hover {
background-size:120%;
}
.product-module:hover h2 {
color:$orange;
}
.product-module h2 {
color:white;
font-size:2.375rem;
font-weight:$medium;
text-align: center;
height: 100%;
margin-bottom: 0px;
justify-content: center;
display: flex;
align-items: center;
padding:10px;
}
.product-overlay {
height:100%;
width:100%;
background-color:rgba(0,127,161,0.8);
display:block;
-webkit-transition: background .5s ease-out;
-moz-transition: background .5s ease-out;
-o-transition: background .5s ease-out;
transition: background .5s ease-out;
}
.product-overlay:hover {
background-color:rgba(0,127,161,0);
}
At the moment the colour fades out fine but the background image zoom jumps into place rather than it happening smoothly, how can I change that?
The problem is likely being caused by:
background-size:cover;
You should change your initial background-size to:
background-size: 100%;
I'm almost afraid to ask this question because it seems like such an obvious one, but I just can't find a clear answer, so at the risk of tarnishing my non-existant reputation, here goes:
Is there a way to add an expanding CSS inner-border to an image on hover, without affecting the size of the image?
Here is my code as close as I can get on my own:
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.media_item_container img {
border: 3px solid #00205f;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.media_item_container img:hover {
border: 10px solid #00205f;
}
.media_item_container a
{
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
}
.media_item_container a:hover
{
color:#fff;
}
HTML
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#"><img src="http://lorempixel.com/output/business-q-c-158-158-5.jpg" width="158" height="158" class="media_item_thumb" />
<h3>E-Brochure: <em>Printable e-brochure</em></h3>
DOWNLOAD »</a>
</div>
</div>
</body>
http://jsfiddle.net/aKedV/
Just trying to determine if there is any way to do it without the image scaling down as the border size increases (I basically understand why this is happening, just can't seem to come up with a solution on my own).
And I should clarify when I ask if there is a way to do this, I assume there must be some way to do this, but I would love to know if there is a relatively easy way.
Thanks so much!
You can use outline instead of border.
outline:3px solid red;
outline-offset:-3px; //keeping it inside
and on hover
outline:10px solid red;
outline-offset:-10px;
Fiddle
Mate this is the solution that I came up with. Had to Change some HTML and CSS up but this is my shot at it. Hope this helps mate, Cheers
http://jsfiddle.net/aKedV/3/
HTML:
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#">
<div class="border" style="background: url(http://lorempixel.com/output/business-q-c-158-158-5.jpg);">
</div>
<h3>E-Brochure: <em>Printable e-brochure</em></h3>
DOWNLOAD »</a>
</div>
</div>
CSS:
.border {
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
-kthtml-transition: all 500ms linear;
transition: all 500ms linear;
width: 158px;
height: 158px;
}
.border:hover {
-webkit-box-shadow: inset 0px 0px 2px 10px #00205f;
box-shadow: inset 0px 0px 2px 10px #00205f;
}
.media_item_container a
{
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
}
.media_item_container a:hover
{
color:#fff;
}
I'm having trouble finding a solution to this problem.
I have set up this small example here.
Google Chrome seems to break the border radius on :hover while Firefox renders it properly. What would be the correct approach to fix this?
position:relative in .bubble is probably the thing breaking it, if that's so is there any other solution to have the .info absolute position div nested to the .bubble so top: would use the top of the .bubble and not the page?
HTML:
<div class="bubble">
<img src="http://oneslidephotography.com/wp-content/uploads/2009/05/Digital-SLR-Photography-All-in-One-For-Dummies-sample-image.jpg" />
<div class="info">
<h3>Some Info Text</h3>
</div>
</div>
CSS:
.bubble {
position: relative;
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.info {
overflow: hidden;
position: absolute;
width: inherit;
-webkit-transition: top 0.2s ease-out;
-moz-transition: top 0.2s ease-out;
-o-transition: top 0.2s ease-out;
-ms-transition: top 0.2s ease-out;
transition: top 0.2s ease-out;
top:200px;
}
.bubble:hover .info {
top:80px;
}
.info h3{
text-align: center;
font-family: sans-serif;
}
I think the problem is the fact that you have an image taking up your whole background.
I've changed it so that you don't have an image (and reduced the border radius) ... so just basic border-radius, and of-course, things are fine:
<div class="bubble" style='border:solid 1px'>
<div class="info">
<h3>Some Info Text</h3>
</div>
</div>
http://jsfiddle.net/SbR6n/
Sounds like a bug.