Roll over image covers. Notice that overflow is hidden so if there is too much text the extra gets cut off (column 4). Be Careful when considering how it will behave responsively.
[raw]
[column size=”1/4″ wpautop=”false”]
Lorem ipsum dolor sit amet
[/column]
[column size=”1/4″ wpautop=”false”]
Lorem ipsum dolor sit amet, consectetuer adipiscing
[/column]
[column size=”1/4″ wpautop=”false”]
Lorem
[/column]
[column size=”1/4″ wpautop=”false”]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
[/column]
[/raw]
Using Jumpstart columns notice wpautop=”false”
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | [raw] [column size="1/4" wpautop="false"] <div class="roll-over-wrap"> <img src="https://cleansupersites.com/wp-content/uploads/2016/07/horizontal1500x1125-blue-800x800.jpg" alt="horizontal1500x1125-blue" width="600" height="600" class="size-tb_square_medium wp-image-1720" /> <div class="roll-over"><div class="roll-over-inner">Lorem ipsum dolor sit amet</div></div><!--roll-over--> </div><!--roll-over-wrap--> [/column] [column size="1/4" wpautop="false"] <div class="roll-over-wrap"> <img src="https://cleansupersites.com/wp-content/uploads/2016/07/horizontal1500x1125-green-800x800.jpg" alt="horizontal1500x1125-green" width="600" height="600" class="size-tb_square_medium wp-image-1721" /> <div class="roll-over"><div class="roll-over-inner">Lorem ipsum dolor sit amet, consectetuer adipiscing </div></div><!--roll-over--> </div><!--roll-over-wrap--> [/column] [column size="1/4" wpautop="false"] <div class="roll-over-wrap"> <img src="https://cleansupersites.com/wp-content/uploads/2016/07/horizontal1500x1125-lavendar-800x800.jpg" alt="horizontal1500x1125-lavendar" width="600" height="600" class="size-tb_square_medium wp-image-1722" /> <div class="roll-over"><div class="roll-over-inner">Lorem </div></div><!--roll-over--> </div><!--roll-over-wrap--> [/column] [column size="1/4" wpautop="false"] <div class="roll-over-wrap"> <img src="https://cleansupersites.com/wp-content/uploads/2016/07/horizontal1500x1125-purple-800x800.jpg" alt="horizontal1500x1125-purple" width="600" height="600" class="size-tb_square_medium wp-image-1723" /> <div class="roll-over"><div class="roll-over-inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div></div><!--roll-over--> </div><!--roll-over-wrap--> [/column] [/raw] |
and the css.
NOTE: this is for square images, if your images are not square divide height by width and then multiply by 100 and use that percentage in line 12 below.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .roll-over-wrap { position: relative; } .roll-over-wrap img { width: 100%; height: auto; } .roll-over { position: absolute; top: 0; width: 100%; height: 100%; background: #000000; overflow: hidden; opacity: 0; -webkit-transition: opacity .5s; /* Safari */ transition: opacity .5s; } .roll-over .roll-over-inner { position: absolute; text-align:center; color: #ffffff; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); padding: 10px; width: 100% } .roll-over-wrap:hover .roll-over, .roll-over:hover { opacity: 1; } |