I want to put a lightbox effect on every image. When I click an image, it must be enlarged (on the same page) and when I click at any part of the webpage except the image, the image must close.
<div class="row jumbotron">
<div class="text-center">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
</div>
Nice and easy with bootstrap.
<div class="col-sm-4">
<img src="*insert image*" class="img-responsive" data-toggle="modal" data-target=".lightbox"/>
<div class="modal lightbox" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img src="*insert image*" class="img-responsive"/>
</div>
</div>
</div>
</div>
Related
I have an HTML code, And I want to limit the article to 10 and auto load when the scroll is reached the last article, also show loading spinner. It looks like need jquery or javascript to make it works.
I hope that I could make it auto load when reaching 10 articles with loading spinner.
Here is my HTML code :
<div class="container">
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">2</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Ada Lowongan Kerja Terbaru di Kemenkes, Mau?</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">3</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Perhatikan Penampilan Ketika Wawancara Kerja, Ini Tipsnya</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">4</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Berdasarkan Zodiak, Ini Wanita yang Jadi Pasangan Terbaik</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">5</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Generasi Ini Paling Rentan Bertengkar Soal Uang dengan Pasangan</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">6</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Gaya Andalan Syahrini Setelah Berhasil Berbobot 47 Kilogram</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">7</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Parfum Bertahan Seharian? Tidak Sulit dengan 8 Cara Ini</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">8</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Siaran Tanpa Makeup, Newscaster Ini Tuai Pujian</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">9</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Jakarta Buka Kompetisi Balet Internasional Asian Grand Prix</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">10</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Drone Ikut Berlenggak Lenggok di Panggung Runway Dolce & Gabanna</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
</div>
I'm a novice coder and working on a personal website and was really hoping to use the isotope filter function in the portfolio section of my site. I've been having trouble with it however and was wondering if anyone might be able to provide guidance? I'm not sure whether it's my html or jquery at this point. Very much appreciated!
Thank you,
Joanna
HTML:
<!--PORTFOLIO-->
<section id="portfolio-section" class="text-left">
<div class='container'>
<div class="row">
<div class="col-md-12">
<div class="portfolio">
<div class='container'>
<div class="page-header text-center wow fadeInDown" data-wow-delay="0.4s">
<h2>Portfolio</h2>
<h4>Increasing the accessibility & usefulness of data to decision-makers</h4>
</div>
</div>
<div class="portfolio_content_area">
<div class="portfolio_menu">
<center>
<ul id="filters">
<li class="active_prot_menu"><img src='images/data.png' height='13'> Data Visualisation & Reporting ▪ </li>
<li><img src='images/course.png' height='14'> Coursework ▪ </li>
<li><img src='images/art.png' height='14'> Artwork</li>
</ul>
</center></div>
<div class="portfolio_content" id="portfolio">
<div class='row' id="portfolio">
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/1-dv.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/tableau.html" target="_blank"><img src='images/data_white.png' height='17'><h1>LensShift</h1>
<p>Data visualisation of the depth and breadth of the LensShift Taxonomy.<br>By collaborating with my colleagues, I ensure the quality of data is appropriate for effective and creative visualisation.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/2-siobn.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/SIOBN_Michaelmas17-18_Impact_Report.pdf" target="_blank"><img src='images/data_white.png' height='17'><h1>SIOBN</h1>
<p>Monitoring & evaluating the Social Impact Oxford Business Network's (SIOBN) initiatives. Providing ongoing reporting to stakeholders on the relevance of activities.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/3-BSC.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/3-bsc.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Skoll Academy</h1>
<p>Strategic consulting project with Big Society Capital investigating social investment models to address domestic violence in the UK.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/4-EY.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/4-EY.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Leadership</h1>
<p>A case study on the motivation and integration of EY's GigNow workforce.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/5-MedData.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/5-MedData.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Global Health Challenge</h1>
<p>A case study on using MedData™ to lower the burden of chronic diseases.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="art">
<img src="images/6-insta.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="https://www.instagram.com/joannamakescards_/" target="_blank"><img src='images/art_white.png' height='22'><h1>Art</h1>
<p>Stationery, Design, Lettering</p></a></details>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
</section>
jQuery:
$(window).load(function() {
$('.portfolio_menu ul li').click(function(){
$('.portfolio_menu ul li').removeClass('active_prot_menu');
$(this).addClass('active_prot_menu');
});
var $container = $('#portfolio');
$container.isotope({
itemSelector: '.col-sm-4',
layoutMode: 'fitRows'
});
$('#filters').on( 'click', 'a', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- When click on image -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;">
<figcaption class="img-title"> </figcaption>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="panel panel-default" style="margin-top: 7px;">
<div class="photo-gallary-head panel-heading ">
<h4 title="Photo Gallery" class="photo-gallary-head-name"> Photo Gallery </h4>
</div>
<div class="panel-body">
<div class="img-t humbnail">
<div class="carousel slide" id="myCarousel1" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<!--/item-->
<div class="item active">
<div class="row">
<div class="col-xs-3">
<a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-1.jpg">
<figcaption class="img-title">A caption for the above image.</figcaption></a>
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-2.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-3.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-4.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-5.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-6.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-7.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-8.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-9.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-10.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-11.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-12.jpg">
</div>
</div>
</div>
<!--/item-->
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-13.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-14.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-15.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-16.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-17.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-18.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-19.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-20.jpg">
</div>
</div>
</div>
<!--/item-->
</div>
</div>
<div id="carouselButtons" style="text-align:center; margin-top:20px">
<a class="left1 carousel-control1" href="#myCarousel1
" data-slide="prev" title="Previous"><i class="fa fa-angle-left"></i></a>
<button id="pauseButton" type="button" class="btn btn-default btn-md" title="Play">
<i class="fa fa-play-circle" style="font-size:20px"></i>
</button>
<button id="playButton" type="button" class="btn btn-default btn-md" title="Pause">
<i class="fa fa-pause-circle" style="font-size:20px"></i>
</button>
<a class="right1 carousel-control1" href="#myCarousel1" data-slide="next" title="next"><i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
I have done preview the image with the help of model popup, but need show same image caption when click on image. In this code this is the thumbnail slider with image preview. Here some of the missing file, it is not working. I don't want to show by title but show by caption. This is the thumbnail slider.
You can try to set title or alt tag into image, i think it will take automatically as caption.
Or can you give me your slider jquery url
I have a page in which i want to display the button just side to an image ,therefore it looks like image button and so an as a loop where the implies to download but i am not good at css and I tried as below but it does not fix to my requirement.Can any one please adjust my code.Thanks in advance.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div>
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</div>
</div>
maybe this?
img.the-image-class + .the-button-class {
display: block;
margin-top: -20px; /* to move button 20px above from original position */
}
Look at output i think html was not formatted well.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="row">
<div class="pressImg col-xs-6 col-sm-6 col-md-6">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 ">
<button class="btn btn-sm btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</section>
May be like this,
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div class="clearfix">
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
</div>
</div>
</div>
</section>
I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!