1

I have a little thumbnail that shows the title of an image. When you hover over it, the overlay spreads over the entire image and the button "learn more" will show as well. This is a fiddle of what I have so far:

http://jsfiddle.net/razLnbvL/

My HTML:

<section id="industries"> <article> <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" /> <div class="caption"> <span>Golf Courses</span> <a href="#" title="Learn more" class="button">Learn more</a> </div> </article> <article> <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" /> <div class="caption active"> <span>Land Owners</span> <a href="#" title="Learn more" class="button">Learn more</a> </div> </article> <article> <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" /> <div class="caption"> <span>Landscape Contractors</span> <a href="#" title="Learn more" class="button">Learn more</a> </div> </article> </section>

And my CSS:

#industries article { float: left; width: 33.33333%; position: relative; } #industries article img { max-width: 100%; } #industries article .caption { position: absolute; box-sizing: border-box; width: 100%; background-color: rgba(24, 66, 113, 0.65); color: #fff; text-align: center; font-weight: bold; text-transform: uppercase; padding: 9px 14px; bottom: 0; height: auto; transition: height 0.25s ease-out; } #industries article .caption span { display: block; } #industries article .caption .button { background-color: #b50937; border-color: #b50937; display: none; color: #fff; padding: 10px 30px; text-transform: uppercase; text-align: center; cursor: pointer; } #industries article:hover .caption { height: 100%; padding-top: 40px; transition: height 0.25s ease-in; } #industries article:hover .caption span { margin-bottom: 25px; } #industries article:hover .caption .button { display: inline-block; text-decoration: none; }

However, I have tried min-height and max-height, but obviously the max-height won't work since the text doesn't even take up the entire space initially so it's only going to go to the height of the text. And when I set the height attribute to 100% it just jolts up without the transition again.

Any help would be appreciated! I want the overlay to slowly slide up and the learn more button to fade in (but I can do that later once I get the slide to work).

Improve this question
4
  • 1
    Insteed of transition from auto to 100% what don't you try from a fixed height (in your fiddle something like height: 36px;) to 100%?. woudn't it work? (add also overflow hidden to #industries article Commented Sep 9, 2015 at 14:57
  • I can't do a fixed height because sometimes the text will be two lines instead of one. Commented Sep 9, 2015 at 15:00
  • umm... I'll take another look then.. this is the fiddle I was modifiying if Youwant to check it out (for the fade transition) jsfiddle.net/alvaromenendez/razLnbvL/7 Commented Sep 9, 2015 at 15:01
  • The fixed height DOES work though. I just can't go by that unfortunately :( And thank you for helping out with the fade as well! Much appreciated! Commented Sep 9, 2015 at 15:03

3 Answers 3

Reset to default
1

I haven't worked out all the kinks, but this is pretty close using only CSS.

#industries article { float: left; width: 33.33333%; position: relative; overflow:hidden; } #industries article img { max-width: 100%; } #industries article:hover .caption { height:100%; max-height: 100%; padding-top: 40px; } #industries article .caption { position: absolute; box-sizing: border-box; width: 100%; background-color: rgba(24, 66, 113, 0.65); color: #fff; text-align: center; font-weight: bold; text-transform: uppercase; padding: 9px 14px; bottom: 0; height: auto; max-height: 36px; transition: padding-top 0.5s, max-height 0.75s; } #industries article .caption span { display: block; margin-bottom: 25px; } #industries article .caption .button { background-color: #b50937; border-color: #b50937; display: inline-block; text-decoration: none; color: #fff; padding: 10px 30px; text-transform: uppercase; text-align: center; cursor: pointer; visibility:hidden; opacity: 0; transition:visibility 0.2s linear,opacity 0.2s linear; } #industries article:hover .caption span { } #industries article:hover .caption .button { visibility:visible; opacity: 1; }
<section id="industries"> <article> <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" /> <div class="caption"> <span>Golf Courses</span> <a href="#" title="Learn more" class="button">Learn more</a> </div> </article> <article> <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" /> <div class="caption active"> <span>Land Owners</span> <a href="#" title="Learn more" class="button">Learn more</a> </div> </article> <article> <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" /> <div class="caption"> <span>Landscape Contractors</span> <a href="#" title="Learn more" class="button">Learn more</a> </div> </article> </section>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Ok mate... This solution may work for you BUT it may not be very pretty (I hate the use of !important) and need a little jquery.

Basically as I wrote in the comments there's a easy solution if the height could be a fixed value, but it is not.

However we can calculate the height with jquery and apply the value to each caption. We need though a diferent class for each container. in your case like:

<article> <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" /> <div class="caption cap1"> <span>Golf Courses</span> <a href="#" title="Learn more" class="button">Learn more</a> </div> </article> <article> <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" /> <div class="caption active cap2"> <span>Land Owners</span> <a href="#" title="Learn more" class="button">Learn more</a> </div> </article> <article> <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" /> <div class="caption cap3"> <span>Landscape Contractors</span> <a href="#" title="Learn more" class="button">Learn more</a> </div> </article>

I added cap1, cap2, cap3 classes.

The jquery:

$(document).ready(function () { var height1 = Math.max($(".cap1").outerHeight()); $("#industries article .cap1").height(height1); var height2 = Math.max($(".cap2").outerHeight()); $("#industries article .cap2").height(height2); var height3 = Math.max($(".cap3").outerHeight()); $("#industries article .cap3").height(height3); });

And then as hover css:

#industries article:hover .caption { height: 100% !important; padding-top: 40px; transition: all 0.25s ease-in; bottom:0; }

You need the important to overwritte the value set with jquery as an inline style will always be applied over css sheet.

(the bottom value I changed at caption was to let it looks as in your first example)

Edit: if you resize the window to check a caption with 2 text lines you need to reload the page to make the script works again.

JSFIDDLE

Improve this answer

4 Comments

I'm going to go ahead and accept your answer since you answered me in the comments. I went with the fixed height idea and will just let my team know their limits.
Check the fiddle. it's not the same as in the comments. It will work whatever lines the caption have
I know. I just really don't want to use jQuery for it.
Ah. ok. Btw. if you want to uncheck the "right answe" it's absolutely fine with me. I understand that this is not the answer you were looking for so it may help more people trying to get the "right one" (for you). A "this answer is helpfull" vote is more than enough (again if you want). gl with your project
0

There is no way to handle transitions from height:auto with pure CSS. Here you can read some workaround: http://n12v.com/css-transition-to-from-auto/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.