Why did they used .card>img
<!DOCTYPE html> <html> <head> <title> Try It Yourself </title> <style type="text/css"> .card { box-shadow: 0 15px 30px rgba(0,0,0,0.30), 0 11px 8px rgba(0,0,0,0.22); width: 250px; box-sizing: border-box; transition-duration: 1s; } .card > img { display: block; max-width: 100%; height: auto; margin: 0px; } .card > p { font-family: sans-serif; padding: 0px 10px 10px 10px; text-align: center; } .card:hover { box-shadow: 0 18px 36px rgba(0,0,0,0.30), 0 14px 11px rgba(0,0,0,0.22); width: 270px; } </style> </head> <body> <div class="card"> <img src="images/woman.jpg" /> <p> Description of the image goes here. Try clicking and holding me to see the hover effect. </p> </div> </body> </html>
Often have questions like this?
Learn more efficiently, for free:
