I've been struggling with a problem that I know the right person can easily fix in one shot.
I need to create something similar to this site:
http://www.arcadiacontemporary.com/artists/index.php
However I need multiple artist columns/tables like this site:
https://collinsgalleries.com/ARTISTS5.html
I would like the mouseover to work the same however when it grabs the image, I would rather be able to use external files and URLs vs internal.
Both site uses jquery and bootstrap, which I need to integrate into a Wordpress website. I do not know jquery or bootstrap js so I'm trying my best to create it without.
The best I've got so far for code is:
HTML
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 0px solid black; padding: 5px; } table { border-spacing: 15px; ] </style> </head> <body> <a href="#"><div class="hover-img"> <table style="width: 100%"></table> <th>Artist Name</th> </tr> <span><img src="https://collinsgalleries.com/images/Artist-Page-Monks.jpg" alt="image" height="fixed" /> </span> </div></a> <a href="#"><div class="hover-img"> <tr> <th>Artist Name</td> <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Old_Friends.jpg" alt="image" height="fixed" /> </span> </div></a> <a href="#"><div class="hover-img"> <td>Artist Name</td> <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Beds.jpg" alt="image" height="fixed" /> </span> </div> </a> <a href="#"><div class="hover-img"> <td>Artist Name</td> <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_MacBeth-frame.jpg" alt="image" height="fixed" /> </span> </table> </body> </html> then CSS
a .hover-img { position:static; } a .hover-img span { position:absolute; left:-9999px; top:-9999px; z-index:9999; } a:hover .hover-img span { top: 1vw; left:18vw; } td { display: table-cell; vertical-align: inherit; } The issue with this code is - The images aren't don't size the same in the middle. if I add a 3rd line the formatting breaks. And this needs to be mobile responsive as well.
I am open to all suggestions. Thank you in advance
https://stackoverflow.com/questions/65589092/text-hover-to-image-with-multiple-columns-and-fixed-image-in-center-mouseover January 06, 2021 at 09:47AM
没有评论:
发表评论