Hover cards10  Advanced Image Cropping, Hover & L-Out Management
The layout and key CSS is in the “excerpt” shortcode | Edit SC=excerpt In case of several excerpt SC’s in the page the last SC format variables overrule the others.

Resources
• Card shortcodes in grid layouts | 3 Shortcodes: t1-i1-u1 /posts/sc-t1-i1-u1 • Oppfølging etter kurset | /posts/pge1/ • Image controls | Basic CSS solutions | /posts/img/ • Cropped images | /cropped/Stackoverflow.com > how-to-crop-a-rectangular-image-into-a-square-with-css /Detailed: how-to-display-raw-html/ – [ sc name=”autocrop”][ /sc] OUCH!!

Excerpts 1
1
LAKE
This enables the automatic generation of cards ...




• MORE: hover-cards10 • 81522 …
‹div class="ØfL1 pw0" style="width:100px; margin-right:10px!important;"› ‹img src="/IMG.jpg" width="100%" class="alignleft" /› ‹div class="Øsub3"›‹b›Click to enlarge‹/b›‹/div›‹/div› ‹a href='/wp-content/uploads/USER2.png' class='popup' data-height='720' data-width='1300' data-scrollbars='0'›
1
HYTTE
This too enables the automatic generation of cards ... This too enables the automatic generation of cards ...


Caption1: ØfL1.25% | Øsub0
• MORE: acf_wys1 + This body_01 uses classical methods. The padding-top used for the text, position:absolute solution, pushes the block and is notOK. ..
News
CUPS
CUPS are for real are for real are for real are for real


3
Title 3rd
Next steps. The text classes are not used.



Excerpts
1
Exc
This ...




• MORE: hover-cards10 • 81522 …
2
Vaucluse en majesté
Customized content per card ...


News
HOUSE_HIPASS
A few words about this card..


Text et
Caption1: ØfL1.25% | Øsub0
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 81522 Edit sc cardlet1
SECTION
ABC
0 No LGC | Box width=100px – No cropping. The image links to a full size view | ‹div class=”ØfL1 pw0″ style=”width:100px; margin-right:10px!important;”›
01
Click to enlarge
HTML ‹div class="ØfL1 pw0" style="width:100px; margin-right:10px!important;"› ‹img src="/IMG.jpg" width="100%" class="alignleft" /› ‹div class="Øsub3"›‹b›Click to enlarge‹/b›‹/div›‹/div› ‹a href='/wp-content/uploads/USER2.png' class='popup' data-height='720' data-width='1300' data-scrollbars='0'›
CSS
.ØfL1 {float:left; margin:0 12px 1px 1px!important; overflow:hidden;}
.pw0 {margin:0 0 8px!important; padding:0!important; background-color:rgba(247, 249, 249,1)!important; border:1px solid rgba(225, 225, 240,1)!important;}

pre {margin:0; padding:4px 4px 4px 8px; border:1px dashed rgba(180,160,190,0.5); border-radius:4px; white-space:pre-wrap; line-height:1.3em; color:rgba(100,10,100,1);}

code {font-family:"Courier New", monospace !important; display:grid; color: rgba(28,90,145,1)!important; padding:4px 4px 4px 8px; border:1px dashed rgba(160,180,190,0.3); white-space:pre-wrap; line-height:1.3em; font-weight:500;}

1 No LGC | Box width=100px – No cropping. The image links to a full size view
Click to enlarge
HTML ‹article class="ØfL1 post_wrap4" style="width:100%"› ‹div class="ØfL1 pw0" style="width:175px; margin-right:10px!important;"› ‹img src="/IMG.jpg" width="100%" class="alignleft" /› ‹div class="Øsub3"›‹b›Click to enlarge‹/b›‹/div›‹/div› ‹a href='/wp-content/uploads/USER2.png' class='popup' data-height='720' data-width='1300' data-scrollbars='0'› CSS
.ØfL1 {float:left; margin:0 12px 1px 1px!important; overflow:hidden;}
.pw0 {margin:0 0 8px!important; padding:0!important; background-color:rgba(247, 249, 249,1)!important; border:1px solid rgba(225, 225, 240,1)!important;}

pre {margin:0; padding:4px 4px 4px 8px; border:1px dashed rgba(180,160,190,0.5); border-radius:4px; white-space:pre-wrap; line-height:1.3em; color:rgba(100,10,100,1);}

code {font-family:"Courier New", monospace !important; display:grid; color: rgba(28,90,145,1)!important; padding:4px 4px 4px 8px; border:1px dashed rgba(160,180,190,0.3); white-space:pre-wrap; line-height:1.3em; font-weight:500;}
2 LGC | Crop and width=100px in CSS: img c100
HTML ‹div class="post_wrap4" style="margin-right:12px!important"› ‹img class="img c100" style="margin-right:12px!important" src="[ wpbb post:acf type='wysiwyg' name='acf_im1']"/›
CSS
 img.c100 {float:left; width:100px; height:100px; object-fit:cover; object-position:50% 0px; margin:0; overflow:hidden;} 

From img c20 – c300 | See posts/squarecrop1

3 The crop ratio is managed by sq-img. The width is set locally in the box style.
‹div class="ØfL1 sq-c pw0" style="width:90px; margin-right:4px;"› ‹ img class="sq-img" src=" /wp-content/uploads/USER3.png " class="aligncenter" / ›‹ /div ›
.sq-c   {position:relative; width:100%;}
.sq-c::after   {content:""; display:block; padding-bottom:100%;}
.sq-img   {position:absolute; width:100%; height:100%; object-fit:cover;}

4 Background-image:url + img class=”center_block
‹ div style="width=100%; padding:25px; background-image:url(/wp-content/uploads/MOOR.gif);" > ‹ img class="center_block pw5" src="/wp-content/uploads/SAFARI_LOGO.png" alt="" width="60%" style="padding:10px;"/ >
.centerblock {position: absolute; top: 50%; left: 50%; font-size: 18px; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}

5 image-container
image-container2
‹ div class="ØfL1 p1" style="position:relative; width:25%; height:180px; margin:1px;"> ‹ div class="centerblock" › ‹ div class="image-container2"> image-container2 ‹ /div>‹ /div>‹ /div>
.image-container2 {background-image: url('/wp-content/uploads/COLOR_02.jpg'); background-size:cover; width:150px; height:20vh; margin:2px; float:left;}


6 aspect_ratio4by3 and centerblock
Position centerblock
.centerblock {position: absolute; top: 50%; left: 50%; font-size: 18px; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}