JSFiddle - React, Tailwind, and code Playground

by motocomdigital

HTML

<!-- Module Box One -->

<div class="home-mod">

    <div class="mod-center"><img src="http://tintation.com/wp-content/uploads/amazing-images-graphics/star-wars-robo-robot.jpg" alt="" /></div>

    <div class="mod-info"> <!-- this is the slider, slides up when .mod-info is hovered -->
                
        <a href="http://jsfiddle.net/" title="testings" class="mod-link"><span>//</span> Proin consectetur velit sed nibh mollis nec facilisis orci convallis</a>
                    
        <div class="mod-excerpt">
                    
            Get the latest news and updates on your mobile device <a href="http://jsfiddle.net/" title="testings" >read more</a>
                        
        </div>
        
    </div>   
                    
</div>

<!-- Module Box Two -->
    
<div class="home-mod">

    <div class="mod-center"><img src="http://www.goodlightscraps.com/content/nature/nature-images-80.jpg" alt="" /></div>

    <div class="mod-info"> <!-- this is the slider, slides up when .mod-info is hovered -->
                
        <a href="http://jsfiddle.net/" title="testings" class="mod-link"><span>//</span> Phasellus fermentum gravida mi, sit amet viverra nunc ornare eu</a>
                    
        <div class="mod-excerpt">
                    
            Get the latest news and updates on your mobile device <a href="http://jsfiddle.net/" title="testings" >read more</a>
                        
        </div>
        
    </div>   
                    
</div>

<!-- Module Box Three -->
    
<div class="home-mod">

    <div class="mod-center"><img src="http://www.architecturenewsplus.com/cdn/images/l/n/q/2/nq2974y.jpg" alt="" /></div>

    <div class="mod-info"> <!-- this is the slider, slides up when .mod-info is hovered -->
                
        <a href="http://jsfiddle.net/" title="testings" class="mod-link"><span>//</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
                    
        <div class="mod-excerpt">
     ...

CSS

body {
    width: 100%;
    height: 100%;
}

div.mod-info {
    width: 100%;
    position: relative;
    background-image: url(http://motocomdigital.co.uk/development/images/black-80percent.png);
    color: #ffffff;
   
    /* This top value below needs to be the height value of a.mod-link, but minus, via jQuery, but every value will be unique, so needs to be applied individually */
    
      

}

div.home-mod {
    height: 236px;
    margin: 10px;
    background: beige no-repeat center center;
    width: 214px;
    float: left;
    position: relative;
    overflow: hidden;
    display: block;
    border-bottom: 4px solid #2cbcf5;
    cursor: pointer;
}

div.mod-center {
    display: block;
    height: 100%;
    background: black;
    top: 0;
    left: -50%;
    position: relative;
    width: 200%;
    text-align: center;
}

div.home-mod div img {
    height: 100%;
    position: relative;
    overflow: hidden;
    width: auto;

}

a.mod-link {
    color: #fff;
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: #000000 1px 1px 0;
    font: 18px 'HelveticaNeueMediumCond';
}

a.mod-link span {
    color: #2cbcf5;
}

div.mod-excerpt {
    padding: 2px 14px 14px;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: normal;
}

div.mod-excerpt a {
    color: #2cbcf5;
    text-decoration: ;
}

JavaScript

$(function() {

    $(".home-mod").each(function() {
        
        var moduleLink = $(this).find(".mod-link").height(),
            modulePlus = moduleLink+20;
        
        $(this).find('.mod-info').css("top", "-" + modulePlus + "px");

    });        

    $("div.mod-info").hover(function() {
        
        var moduleInfo = $(this).height();
        $(this).animate({ top: "-" + moduleInfo + "px" });
    
    }, function() {
        
        var moduleLink = $(this).find(".mod-link").height(),
        modulePlus = moduleLink+20;
    
        $(this).animate({ top: "-" + modulePlus + "px" }); 
    
    });
    
    $(".home-mod").click(function() {
        
        window.location = $(this).find("a.mod-link").attr("href");
        return false;
        
    });
                
});