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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…