Div hover, reveal "read more" link overflowing

Wasn't sure the best way to title this question...view the codepen in question:

http://codepen.io/LA1CH3/pen/NqPJEx

I want to have a list of elements that have a "read more" link that slides up with the title when hovered over. I want all the elements to be the same height, though they will all have different titles.

HTML:

<div class="a">
  <img src="http://toronto3d.ca/wp-content/uploads/2011/10/3d-archiitectural-rendering-interior-classic-kitchen.jpg">
  <div class="hover">
    <h3>The Complete Works of William Shakespeare Bla Bla Overflow</h3>
    <h4>Link here</h4>
  </div>
</div>

CSS:

.a {
  background-color: blue;
  padding: 10px;
  display: inline-block;
  transition: 1s;
  min-height: 250px;
}

h3 {
  width: 100%;
}

.hover {
  display: block;
  background-color: red;
  text-align: center;
  position: relative;
  height: 60px;
  overflow: hidden;
  transition: 1s;
  width: 290px;
}

.b {
  margin-top: -50px;
  height: 100px;
}

JS:

$(".a").hover(function(e){
  e.preventDefault();
  $(this).find(".hover").toggleClass("b");
});

Essentially, I would like to have a div, which holds and image and a title underneath. When the image is hovered, the title would slide up, and from the overflow below the image, a "read more" link would slide up in place of where the title is. I have sort of implemented this, but it doesn't seem right. Also, if I have a title that is long, it will run off the hover div. Whats a good way to make this functionality work?

Answers


Try with absolute positioned elements. Modified codepen

.a {
  background-color: blue;
  border: 10px solid blue;
  display: inline-block;
  transition: 1s;
  min-height: 250px;
  overflow: hidden;
  position: relative;
}

h3, h4 {
  margin: 10px 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.hover {
  display: block;
  background-color: red;
  text-align: center;
  position: absolute;
  transition: 1s;
  width: 100%;
  left: 0;
  bottom: -2.3em;
}

.b {
  bottom: 0;
}

As @isherwood mentioned, you can omit JavaScript.


Have messed about with your codepen to suggest this

var origPanelText = $.trim($('#title').html());  

$(".a").hover(function(e){
  e.preventDefault();
  $(this).find(".hover").toggleClass("b");
});

$('#title').mouseenter(function(){
  var addition = '<a href="#">Read more...</a>';
  var panelText = $.trim($('#title').html()).length;
  var theTitle=$.trim($(this).html());
  if (panelText > 30) {
    var cutString = theTitle.substring(0, 30);
    $(this).html(cutString+addition);
    }
});

$('#title').mouseleave(function(){
    $('#title').html(origPanelText);
});

Any use? EJK


Need Your Help

Downloading/storing Periscope live streaming broadcasts

javascript twitter download video-streaming live-streaming

I'm crawling tweets and, if available, store information to external resources (e.g., Instagram images). Now poeple start using Periscope where users tweet links to a Periscope live streaming broad...

Using Ionic and Firebase : How do you loop thought JSON and Post that data

javascript angularjs json ionic firebase

So I'm creating a app for a school project and hit a barrier. I'm sending up data to firebase and receiving it. But I'm having trouble accessing and posting that data correctly. Im not sure if I'm ...