Card Bootstrap 4 + view hover hm-zoom on image

Topic: Card Bootstrap 4 + view hover hm-zoom on image

xamalekoum C.H free asked 6 years ago

Hello guys !

first, i use BS4 beta + rails 5 + MDB free

here, I have a problem at the level of my cards. I use the BS4 class but I would like to add the mask and the transform scale transition. only, impossible to do it with BS4 base class, or else I'm stuck somewhere .. I want to use the class BS4 by default for the card by that using the way "image hover hm-zoom with the mask" the div in col-12 and too high while the cards are the same size. Here is the code of one of my cards:

Start your code here 

<div class="container">
 <div class="row">
 <div class="col-lg-4 mb-4">
 <div class="card card-body" style="background:url(http://gameactu.eu/wp-content/uploads/2017/08/1497293801_Steam-ARK-Key-Art.jpg)center;background-size:cover">
 <p>
 <span class="badge badge-success"><strong>PVE</strong></span>
 <span class="badge badge-danger"><strong>PVP</strong></span>
 <p>
 <h4 class="card-title h4-responsive text-white">The island</h4>
 <p><%= link_to 'Rejoindre', '#', class: 'btn-sm btn btn-success font-weight-bold', title:'Rejoindre le serveur'%></p>
 </div>
 <div class="btn-group w-100" style="margin-top:-2px">
 <%= link_to '', '#', class: 'btn-block btn-sm btn btn-info fa fa-info', title:'Infos serveur'%>
 <%= link_to '', '#', class: 'btn-block btn-sm btn btn-dark fa-2x fa fa-steam', title:'Collection des mods'%>
 </div>
 </div>
 </div>
 </div>

Add comment

Mikołaj Smoleński staff answered 6 years ago

1 0 Best answer

Hello,

If You want to use mask, You should have an image element inside the wrapper containing class <code>.view</code>
You can correct the code like this:
<pre>Start your code here

<div class="container">
 <div class="row">
 <div class="col-lg-4 mb-4"> 
 <div class="card card-body view overlay hm-white-light hm-zoom"> 
 <img src="http://gameactu.eu/wp-content/uploads/2017/08/1497293801_Steam-ARK-Key-Art.jpg" class="img-fluid" style="position: absolute; top: 0; left: 0" alt="">
 <div class="mask"></div>
 <div style="z-index: 1"> 
 <p>
 <span class="badge badge-success"><strong>PVE</strong></span>
 <span class="badge badge-danger"><strong>PVP</strong></span>
 </p>
 <h4 class="card-title h4-responsive text-white">The island</h4>
 <p><a href="#" class="btn-sm btn btn-success font-weight-bold">Rejoindre le serveur</a></p>
 </div>
 </div>
 <div class="btn-group w-100" style="margin-top:-2px">
 <a href="#" class="btn-block btn-sm btn btn-info fa fa-info">Infos serveur</a>
 <a href="#" class="btn-block btn-sm btn btn-dark fa-2x fa fa-steam">Collection des mods</a>
 </div>
 </div>
 </div>
 </div></pre>

Please insert min. 20 characters.

Hello, If You want to use mask, You should have an image element inside the wrapper containing class .view You can correct the code like this:

Start your code here

 <div class="container">
 <div class="row">
 <div class="col-lg-4 mb-4"> 
 <div class="card card-body view overlay hm-white-light hm-zoom"> 
 <img src="http://gameactu.eu/wp-content/uploads/2017/08/1497293801_Steam-ARK-Key-Art.jpg" class="img-fluid" style="position: absolute; top: 0; left: 0" alt="">
 <div class="mask"></div>
 <div style="z-index: 1"> 
 <p>
 <span class="badge badge-success"><strong>PVE</strong></span>
 <span class="badge badge-danger"><strong>PVP</strong></span>
 </p>
 <h4 class="card-title h4-responsive text-white">The island</h4>
 <p><a href="#" class="btn-sm btn btn-success font-weight-bold">Rejoindre le serveur</a></p>
 </div>
 </div>
 <div class="btn-group w-100" style="margin-top:-2px">
 <a href="#" class="btn-block btn-sm btn btn-info fa fa-info">Infos serveur</a>
 <a href="#" class="btn-block btn-sm btn btn-dark fa-2x fa fa-steam">Collection des mods</a>
 </div>
 </div>
 </div>
 </div>

xamalekoum C.H free commented 6 years ago

Thank you very much ! you have settled my problem, can you tell me how it is that now my col-12 div have a correct height like any other card? I pass the subject solved, thank you again! sorry google translate, kiss from France bro :p

Mikołaj Smoleński staff commented 6 years ago

I am not sure where exactly is Your col-12 positioned, but I guess that it takes the same height as .col-lg-4 element.

Add comment

xamalekoum C.H free answered 6 years ago

0 0 Best answer