HTML CSS examples for CSS Widget:Image Text
Make the whole div clickable that has a image and text
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .article-box {<!--from w ww . j a va2 s . c om--> display:flex; border:2px solid Chartreuse; box-shadow:yellow 11px 6px 9px -3px; } .article-box:hover { border:2px solid blue; box-shadow:pink 14px 9px 19px -3px; } .article-image { padding:4px; border:solid OrangeRed; height:251px; width:251px; display:inline-block; float:left; } .article-box-text { margin:21px; height:251px; width:451px; background-color:grey; border:2px solid BlueViolet; opacity:0.7; flex:2; } .article-box-text p { margin:6%; font-weight:bold; color:Chartreuse; } </style> </head> <body> <div class="article-list"> <div class="article-box"> <a href="example.com"> <img class="article-image" src="https://www.java2s.com/style/demo/Safari.png" alt="" width="150" height="150"> </a> <div class="article-box-text"> <p>Lorem ipsum dolor</p> </div> </div> <a class="article-box" href="example.com"> <img class="article-image" src="https://www.java2s.com/style/demo/Opera.png" alt="" width="150" height="150"> <div class="article-box-text"> <p>Lorem ipsum dolor</p> </div> </a> </div> </body> </html>