Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Beginner Code Help

Posted by: JuddH99 Aug 21 2018, 12:34 PM

Hi, I'm very beginner at this. However, I managed to get this code working.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.Catalogs{
display: flex;
justify-content: center;
padding: 30px;
}
.ELKINS{
padding-right: 30px;
}
.BOXPARTNERS{
padding-left: 30px;
}
</style>
<div class="Catalogs">
<a href="http://flip.summitcat.com/t/184158-elkins-wholesale-inc">
<img class="ELKINS" border="0" alt="Elkins Catalog" height="288px" width="222px" src="../images/Catalog.jpg"/></a>
<a href="http://www.boxpartners.com/catalogs/viewcatalog.aspx">
<img class="BOXPARTNERS" border="0" alt="Shipping Supplies Catalog" height="288px" width="222px" src="../images/BPCatalog.jpg"/></a>
</div>
</body>
</html>

However, I would like to take what this code does and give it the hover effect like what is found here.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

What do I need to do to get this to work?

Posted by: CharlesEF Aug 21 2018, 02:12 PM

Everything you need is on the page you linked to. Put some code together and post it, then someone can help get it working.