V2b
SC for the crop/hover img:
contain_02 · title_02 · body_02
Quote - Comment
Most up to date card shortcode.
sc name="card1" N="A3" W="30%" H="30%" mgnR="1.5%" img1="HYTTE.jpg" img2="LAKE.jpg" h1_Yshift="0%" h1_transit="1s" rad="0" b_="2px" b_st="dashed" b_col="dodgerblue" shadow="0px 0px 0px rgba(0,0,0,0)"
contain_02 · title_02 · body_02
Quote - Comment
Most up to date card shortcode.
The card1 shortcode detailed in column 1 makes it very easy to insert a hover/crop card image. The card height finally controlled by % thru padding-top in the card container.
.contain {width:x%; padding-top:y%}
Card title
This is the body content of the card. The cropped image is sized responsively W/H (PC, Tab, Mob) relative to a % width of the card container (,itself a % of the vw via the LGC). All the other card components – caption, title and body – are also built responsively using vw. The main design solution is in the s_crop_01 container class which contains the image and caption, set using width via minimum-width% and height via padding-top%. This allows for precise layout control across platforms and enhanced readability on smaller screens.
See detailed card structure using s_crop_01 img (min-width:n% & padding-top:n%)
1 – post_wrap00 full width container
2 – LGC responsive column inlc. post_wrap2 + margin
3 – s_crop_01 container: W/H % of LGC
4 – s_crop_01 img 100% of the above
[ wpbb post:featured_image size=’thumbnail’ align=’left’ linked=’yes’]
[ wpbb post:featured_image size=’medium’ align=’left’ linked=’yes’]
[ wpbb post:featured_image size=’large’ align=’left’ linked=’yes’]
[ wpbb post:featured_image size=’full’ align=’left’ linked=’yes’]
Card title
This is the body content of the card. The cropped image is sized responsively W/H (PC, Tab, Mob) relative to a % width of the card container (,itself a % of the vw via the LGC). All the other card components – caption, title and body – are also built responsively using vw. The main design solution is in the s_crop_01 container class which contains the image and caption, set using width via minimum-width% and height via padding-top%. This allows for precise layout control across platforms and enhanced readability on smaller screens.
See detailed card structure using s_crop_01 img (min-width:n% & padding-top:n%)
1 – post_wrap00 full width container
2 – LGC responsive column inlc. post_wrap2 + margin
3 – s_crop_01 container: W/H % of LGC
4 – s_crop_01 img 100% of the above
The IMG container uses s_crop_01 img
(min-width:n% & padding-top:n%)
CSS for the crop and caption (local) .s_crop_01 img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:51; opacity:1;} .s_crop_01 {position:relative; overflow:hidden; background-color:teal; float:left; margin:0 2vw 4px 0;} @media (min-width:1025px) {.s_crop_01 {min-width:25%; padding-top:25%!important;}} .caption_01 {position:absolute; top:0; left:0; bottom:0; right:0; text-align:center; color:rgba(255,255,255,1); text-shadow:1px 1px #000000; z-index:53;} @media (min-width:1025px) {.caption_01 {padding:0.5vw 0.5vw; font-size:2.2vw; line-height:110%;}}
Containers: post_wrap00 | LGC55 | post_wrap2,mg | s_crop_01
HTML
[ /LGC]‹article class=”post_wrap2″ style=”margin-right:1.4vw;”›
‹section class=“s_crop_01″›‹img class=”p1” src=”[ wpbb post:acf type=’text’ name=’acf_im2′]” alt=”I” /›
‹div class=”caption_01″›‹f700›News‹/f700›‹/div›
‹/section›
‹div class=”title_01 p1B”›post_wrap00 | LGC55 | post_wrap2,mg | s_crop_01‹/div›
pre w. CSS‹/article›[ /LGC]
140-b2
‹img class="c140 p1" style="margin:0 14px 0 0;" src="[ wpbb post:acf type='text' name='acf_im2']"›
160-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.Caption: Øsub1
80-0
90-1
100-2
100-2
110-0
120-4
130-5
140-6
150-7160-2
170-7
180-2
190-7
200-2