Elliptical Crop Effect on Image Hover

Written by @kerixa 3 March 2021

Nowadays, visitors are more interested in seeing photos and videos than reading long texts and using photos on websites is inevitable. Therefore, having a special style for photos in addition to increasing their beauty, will cause visitors to spend more time in your attractive sites. The following code illustrates a picture that is cropped in an elliptical manner when it is hovered. Enjoy!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->

<style>
.circle img {
    transition: 1s ease;
}

.circle img:hover {
	border-radius: 50%;
	transition: 1s ease;
}
</style>
<div class="circle">
<img src="http://www.htmlfreecode.com/files/denver.jpg" width="350"/>    
</div> 
<a target="_blank" href="http://www.htmlfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Free Code</a>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300