Scribd
Upload
37 views2 pages

Circle Images Example

html css

Uploaded by

lhelix31
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views2 pages

Circle Images Example

html css

Uploaded by

lhelix31
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Circle Images Example

This is an example of HTML and CSS code to display three images within circular frames. Below is

the code snippet for your reference.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Circle Images</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="image-container">

<img src="image1.jpg" alt="Image 1">

<img src="image2.jpg" alt="Image 2">

<img src="image3.jpg" alt="Image 3">

</div>

</body>

</html>

body {

display: flex;

justify-content: center;
align-items: center;

height: 100vh;

margin: 0;

background-color: #f0f0f0;

.image-container {

display: flex;

gap: 20px;

.image-container img {

width: 150px;

height: 150px;

border-radius: 50%;

object-fit: cover;

border: 5px solid #ccc;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease;

.image-container img:hover {

transform: scale(1.1);

You might also like