I have a request to add click functionality for mobile as the desktop hover effect would not be usable - works fine for desktop. The issue is that there is a link that needs to be directed once the image swap has occurred. Is it possible to have an initial click to swap and then a click directing to the link after the swap has been made through CSS only. I know in Javascript there may be ways to put actions on the click events but as the preferred messaging for this would be through email it would be preferred to use CSS as I understand Javascript is stripped out for emails.
The code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
.display-mobile {
display: none!important;
max-height: 0;
max-width: 0;
overflow: hidden;
}
.display-desktop {
display: block!important;
}
.mobile-show {
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0;
mso-hide: all;
overflow: hidden;
}
@media only screen and (max-width:599px) {
body .two-column {
white-space: normal!important;
}
body .mobile-hide {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
line-height: 0 !important;
padding: 0;
max-height: 0;
mso-hide: all;
width: 0 !important;
}
body .mobile-show {
display: block !important;
visibility: visible !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5em !important;
overflow: auto !important;
width: auto !important;
height: auto !important;
}
}
/* wrapping in media query prevents styles from activating in OWA */
.yfix{}
@media screen and (max-width:9999px) {
.reveal img{
max-height: 0px;
height:0px;
}
.reveal:hover img{
max-height: none;
height: auto;
}
* [lang=x-reveal] img{
max-height: 0px;
height:0px;
}
* [lang=x-reveal]:hover img{
max-height: none;
height: auto;
}
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#e5e5e5" style="background-color:#e5e5e5;border-collapse:collapse;mso-table-lspace:0px;mso-table-rspace:0px;" >
<tr>
<td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly;" >
<table align="center" class="em_main_table" width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5" style="table-layout:fixed;border-collapse:collapse;mso-table-lspace:0px;mso-table-rspace:0px;" >
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;" >
<div class="mobile-hide">
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;mso-table-lspace:0px;mso-table-rspace:0px;" >
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;" background="https://via.placeholder.com/300x200?text=Normal">
<!-- LINK URL -->
<a class="reveal" lang="x-reveal" href="#" target="_blank" class="em_full_link" style="border-collapse:collapse;mso-line-height-rule:exactly;display:block;width:300px;height:200px;" >
<!-- IMAGE URL -->
<img src="https://via.placeholder.com/300x200?text=Hovered" alt="" width="300" height="200" class="em_full_width mobile-hide" border="0" align="left" style="display:block;max-width:300px;border-width:0 !important;outline-style:none !important;width:300px;height:200px;" />
</a>
</td>
</tr>
</table>
</div>
<!--[if !mso]><!-->
<div class="mobile-show" style="-webkit-text-size-adjust:none;display:none;font-size:0;max-height:0;line-height:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;mso-hide:all;" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;mso-table-lspace:0px;mso-table-rspace:0px;" >
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;" background="https://via.placeholder.com/400x300?text=Normal">
<a class="reveal" lang="x-reveal" href="#" target="_blank" class="em_full_link" style="border-collapse:collapse;mso-line-height-rule:exactly;display:block;width:400px;height:300px;" >
<img src="https://via.placeholder.com/400x300?text=Hovered" alt="" width="400" height="300" class="em_full_width" border="0" align="left" style="display:block;max-width:400px;border-width:0 !important;outline-style:none !important;" />
</a>
</td>
</tr>
</table>
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Any help or suggestions would be great.
