I am using Foundation framework, and I have a large-block-grid-4 set of images, I would like to have a div as a caption to cover the entire image that is inside a li tag, I have done my CSS and html but since the width of the container changes according to the screen size, I can't get the div properly fit into the li at all times
here is an example of the feature I am trying to do.
http://procreate.si
the HTML
<div class="row">
<div class="large-12 columns">
<ul class="large-block-grid-4">
<li>
<div class="overlay"></div>
<a href="#">
<img src="http://placehold.it/290X290" />
</a></li>
<li><img src="http://placehold.it/290X290" /></li>
<li><img src="http://placehold.it/290X290" /></li>
<li><img src="http://placehold.it/290X290" /></li>
</ul>
</div>
</div>
and the CSS
.overlay {
background:#000;
opacity: 0.8;
height: 100%;
position: absolute;
width: 100%;
-webkit-transition: opacity 0.9s;
-moz-transition: opacity 0.9s;
-ms-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
transition: opacity 0.9s;
}
.overlay:hover {
opacity: 1.0
}
the caption div takes the whole width of the ul , this is not what I intended , what is the solution to this?
many thanks
Related
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 2 years ago.
I have a checkbox and an image on an HTML page:
I want the image to disappear when the checkbox is checked, and return back when it's unchecked. It can be easily done with the opacity property but this will only hide the image – and I need it to disappear (so that other elements can take the image's place for example).
I tried to combine opacity with display properties:
img {
display: block;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
#checkbox:checked ~ div img {
display: none;
opacity: 0;
}
<body>
<input type="checkbox" id="checkbox">
<div>
<img src="https://via.placeholder.com/150" alt="">
</div>
</body>
but it wouldn't work (no transition).
How can I solve this problem?
display property cannot be transitioned nor animated. It works fine without it.
img {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
#checkbox:checked ~ div img {
opacity: 0;
}
<body>
<input type="checkbox" id="checkbox">
<div>
<img src="https://via.placeholder.com/150" alt="">
</div>
</body>
You check another question for more information.
In case you need that space you can animate for example height or max-height.
img {
opacity: 1;
max-height: 150px;
transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}
#checkbox:checked ~ div img {
opacity: 0;
max-height: 0;
}
<body>
<input type="checkbox" id="checkbox">
<div>
<img src="https://via.placeholder.com/150" alt="">
</div>
</body>
I'm using this to create a mouseover effect:
<a href="http://glim.pt/produtos/cadeiras">
<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"
onmouseover=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png';"
onmouseout=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png';">
</img>
</a>
But I wanted it to be smoothly, how can I add fade effect? It's for a Wordpress page.
You can accomplish this using CSS transitions, if you aren't opposed to it as detailed in this blog post on crossfading images:
/* A wrapper for your images to transition */
.transition-wrapper {
position:relative;
height:300px;
width:300px;
margin:0 auto;
}
/* Position each image and apply a transition */
.transition-wrapper img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity:0;
}
And then simply update your markup accordingly :
<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras">
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>
Example
/* A wrapper for your images to transition */
.transition-wrapper {
position:relative;
height:300px;
width:300px;
margin:0 auto;
}
/* Position each image and apply a transition */
.transition-wrapper img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity:0;
}
<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras">
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>
Sounds like your going to want to add some javascript to that.
I recommend using the jQuery library.
https://jquery.com/
Here you can find a bunch of different fade effects and the documentation
http://api.jquery.com/
With jQuery:
$('a').hover(function(){
$(this).children().fadeOut(100, function(){
$(this).children().remove();
});
$(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png"</img>').hide().fadeIn(2000));
}, function(){
$(this).children().fadeOut(100, function(){
$(this).children().remove();
});
$(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>').hide().fadeIn(2000));
});
a {
display: block;
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a href="#">
A link
<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>
</a>
Some quick example, but you'll have to fix the issue of the image, that fades in, while the first image fades out. But the post above has much more better solution via css.
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
If this is what you mean? or what you are looking for? I tried to answer to the best of my ability.
I have an image that has an ease-in-out opacity effect when I hover over it. I like the transition effect but not the color of the image when I hover over it. I can't figure out to change the color of my images when I hover over them. background-color: #50b948; does nothing. What am I doing wrong? Here is my CSS and HTML below.
#about img {
margin: 0 auto;
}
.imgAbout img {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.imgAbout img:hover {
background: #50b948;
opacity: 0.6;
}
HTML
<div class="row">
<div class="col-md-4">
<a href="bios/teamBioNeil.html">
<div class="imgAbout">
<img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio">
</div>
</a>
<h1>NAME</h1>
<h3>Chairman & CEO<br>
Senior Wealth Advisor</h3>
</div>
<div class="col-md-4">
<a href="bios/teamBioJeff.html">
<div class="imgAbout">
<img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio">
</div>
</a>
<h1>NAME</h1>
<h3>President<br>
Senior Wealth Advisor</h3>
</div>
<div class="col-md-4">
<a href="bios/teamBioKim.html">
<div class="imgAbout">
<img src="img/team/kim580x410.jpg" class="img-responsive" alt="Bio">
</div>
</a>
<h1>NAME</h1>
<h3>Chief Operating Officer</h3>
</div>
</div> <!-- end row -->
you want to apply the background color of the div that contains the image - rather than the image itself - then when you reduce the opacity of the image the background will show through.
.imgAbout{
background: #50b948;
}
.imgAbout img {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.imgAbout img:hover {
opacity: 0.6;
}
and incidentally - you have too many H1's - semantically you should only have 1 H1 per page (or section) and then the others are H2's eg: page H1 could be "Staff" and then each named below would be H2's or 3's.
I'm working on a virtual tour which involves the user clicking arrow images depending on the location they wish to go, which will then display a new image of the corresponding location. I would like to gradually transition between the images when the user clicks, however I'm having trouble doing so within this particular context. These are the basics of what I have in my HTML:
<div id="tour_images" class="pics">
<section id="beginning">
<div class ="arrow">
<a href="#two">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
</div>
<img src="imgs/beginning.jpg" />
</section>
<section id="two">
<div class="arrow">
<a href="#three">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
</div>
<div>
<img src ="imgs/two.jpg" />
</div>
</section>
<section id="three">
<div class="arrow">
<a href="#four">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
</div>
<div>
<img src ="imgs/three.jpg" />
</div>
</section>
<section id="four">
<div class="arrow">
<a href ="#beginning">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
<div>
<img src ="imgs/four.jpg" />
</div>
</div>
</section>
And here's my CSS:
section {
display:none;
}
section:target{
display:block;
}
section img {
opacity: 0;
transition: 500ms opacity;
}
section:target img {
opacity: 1;
}
As expected, the targeted sections display on click, however the transition of the images on-click isn't working (rather the images just immediately pop up). Can anyone see what I'm doing wrong here?
UPDATE: I've managed to come up with a solution on this which involves changing the CSS to the following (note there is a button at the beginning that, once clicked, displays the first section):
section {
opacity: 0;
transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-khtml-transition: opacity 1s ease-out;
-webkit-transition: opacity 1s ease-out;
height: 0;
overflow: hidden;
}
section:target{
display:block;
opacity: 1;
height: auto;
}
Depending on the browser and its version you might have to include specific rules:
section img {
opacity: 0;
transition: 500ms opacity;
-o-transition: 500ms opacity;
-ms-transition: 500ms opacity;
-moz-transition: 500ms opacity;
-khtml-transition: 500ms opacity;
-webkit-transition: 500ms opacity;
}
Yes, that is annoying, but sometimes required.
I have these social media icons, when the mouse hovers on one icon its should fade into a other icon. I thought of something like this:
HTML:
<div class="socials">
<img src="../images/fb.png" id="fb1" />
<img src="../images/fb-hover.png" id="fb2" />
<img src="../images/twitter.png" id="twitter1" />
<img src="../images/twitter-hover.png" id="twitter2" />
<img src="../images/insta.png" id="insta1"/>
<img src="../images/insta-hover.png" id="insta2" />
</div>
CSS:
/*This is for letting them stack on each other*/
#fb2, #twitter2, #insta2 {
display:none;
position:absolute;
}
/*Fade animation*/
#fb1:hover, #twitter1:hover, #insta1:hover {
opacity: 0.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
Or check this jsfiddle.
The fading out works correctly. But the 'background' image (so the '...-hover.png' image) won't show up. How do I make this work?
Thanks!
If you set display to block on your #fb2, #twitter2, and #insta2, you can see the problem - it's the positioning. In your solution you would need to absolutely position each hover icon under the normal icon. I don't think it can be flexible.
So, I propose a more flexible solution.
Introduce this syntax:
<div class="socials">
<div class="icon">
<img src="http://sillyquark.com/images/fb.png" class="normal" />
<img src="http://sillyquark.com/images/fb-hover.png" class="hover" />
</div>
<div class="icon">
<img src="http://www.sillyquark.com/images/twitter.png" class="normal" />
<img src="http://www.sillyquark.com/images/twitter-hover.png" class="hover" />
</div>
<div class="icon">
<img src="http://www.sillyquark.com/images/insta.png" class="normal" />
<img src="http://www.sillyquark.com/images/insta-hover.png" class="hover" />
</div>
</div>
Put each icon in a div with a class of of .icon and inside put two images.
Set the .icon div's position to relative to allow absolute positioning relative to the .icon, instead of the body element. Set each icon's top and left to 0px, and add transitions to all images. Also, add width to .icon and img.
.icon{
float: left;
position: relative;
width: 45px;
height: 45px;
padding: 20px;
}
.icon img{
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
opacity: 1.0;
position: absolute;
width: 45px;
top: 0;
left: 0;
}
This is how you switch opacities. In normal conditions, set .icon .normal's opacity to 1.0, and .icon .hover's opacity to 0.0. On hover, do the oposite.
.icon .hover { opacity: 0.0; }
.icon:hover .hover { opacity: 1.0; }
.icon:hover .normal { opacity: 0.0; }
Check out this fiddle for the demo http://jsfiddle.net/uUk6N/3/