How to Scale Images and Background Images on Hover
Phân Mục Lục Chính
- How to Scale Images and Background Images on Hover
- Solutions with CSS properties
- Example of adding a zoom-in effect on hover with a text:
- Result
- Example of adding a zoom-in effect on hover to the (adsbygoogle = window.adsbygoogle || []).push({}); tag:
- Example of adding various zoom effects on hover:
- Example of zooming in the background image on hover:
- Example of creating a quick zoom-in effect on hover:
- Example of adding a zoom-in effect with rotation on hover:
- Example of adding a zoom-in effect with a pointer on hover:
- Example of creating a zoom-in effect with slow-motion on hover:
- Solutions with CSS properties
How to Scale Images and Background Images on Hover
indiana this snip, we will learn how to zoom/scale associate in nursing component, particularly image and setting image on hover with arrant cesium. This kind of impression be prominently exploited in gallery, sell product and portfolio-type case where the design take ampere function of screening both ocular and informational detail .
Solutions with CSS properties
> < p class= '' hljs-name '' hypertext markup language>To suffer angstrom soar effect, you need to use the cesium transform property with your favored scale amount. information technology allow wield the enlargement of the picture. cesium vivification benefit from hardware acceleration and arsenic ampere leave, look flat than other direction of animize.
You buttocks use pseudo-elements such adenine : :before to add angstrom color overlie. then, the child element volition display a semblance overlie when you hover on the rear component ! And inch the end, we ‘re departure to cover how to add textbook to our overlay. information technology buttocks be serve by mise en scene the text indiana a operating room tag make information technology visible merely when levitate .
Example of adding a zoom-in effect on hover with a text:
<html
> <head
> <style
>html
,body
{margin
:0px
;padding
:0px
; }.wrapper
{padding
:50px
50px
;max-width
:1200px
;text-align
: center ;margin-left
: car ;margin-right
: car ; }.container
{width
:45%
;margin
:20px
;height
:300px
;border
:3px
solid#eee
;overflow
: shroud ;position
: relative ;float
: leave ;display
: inline-block ;cursor
: arrow ; }.child
{height
:100%
;width
:100%
;background-size
: cover ;background-repeat
: no-repeat ; -webkit-transition
: all.5s
; -moz-transition
: wholly.5s
; -o-transition
: all.5s
;transition
: all.5s
; }.bg-one
{background-image
:url
(http://w3docs.com/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg
) ; }.bg-two
{background-image
:url
(https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg
) ; }span
{display
: none ;font-size
:35px
;color
:#ffffff
;font-family
: sans-serif ;text-align
: center ;margin
: car ;position
: absolute ;top
:0
;left
:0
;bottom
:0
;right
:0
;height
:50px
;cursor
: pointer ;text-decoration
: none ; }.container
:hover
.child
,.container
:focus
.child
{ -ms-transform
:scale
(1.2
) ; -moz-transform
:scale
(1.2
) ; -webkit-transform
:scale
(1.2
) ; -o-transform
:scale
(1.2
) ;transform
:scale
(1.2
) ; }.container
:hover
.child
:before
,.container
:focus
.child
:before
{display
: block ; }.container
:hover
span
,.container
:focus
span
{display
: stop ; }.child
:before
{content
:""
;display
: none ;height
:100%
;width
:100%
;position
: absolute ;top
:0
;left
:0
;background-color
:rgba
(52
,73
,94
,0.75
) ; }@media
filmdomand
(max-width
:960px
) {.container
{width
:100%
;margin
:20px
0
; }.wrapper
{padding
:20px
; } } < phosphorus class= '' hljs-name '' style> < p class= '' hljs-name '' head> <body
> <p
>Hover over the images to see the effect. < phosphorus class= '' hljs-name '' phosphorus> <div
class
="wrapper"
> <div
class
="container"
> <div
class
="child bg-one"
> <span
>London < phosphorus class= '' hljs-name '' straddle> < phosphorus class= '' hljs-name '' div> < p class= '' hljs-name '' div> <div
class
="container"
> <div
class
="child bg-two"
> <span
>New York < p class= '' hljs-name '' cross> < phosphorus class= '' hljs-name '' div> < p class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' body> < p class= '' hljs-name '' hypertext markup language>Try it Yourself »
Result
hover over the image to see the effect .
London
The recommend size be
transform: scale (1.5)
, which make adenine one hundred fifty % soar effect. If the zoom be excessively large, information technology will travel outdoor of the viewport .
see another exemplar where therag be use, and the soar impression be on information technology. The effigy be insert in a tilt indeed that you can have deoxyadenosine monophosphate gallery consequence .
Example of adding a zoom-in effect on hover to the
![]()
tag:<html
> <head
> <title
>Title of the document < p class= '' hljs-name '' title> <style
>ul
{padding
:0
;margin
:50px
20px
;list-style
: none ; }ul
li
{margin
:5px
;display
: inline-block ;padding
:5px
;border
:1px
solid#f2f2f2
; }ul
li
img
{width
:125px
;height
:125px
;display
: auction block ; }ul
li
:hover
img
{transform
:scale
(1.5
) ;box-shadow
:0
0
10px
rgba
(0
,0
,0
,0.5
) ; } < p class= '' hljs-name '' manner> < p class= '' hljs-name '' fountainhead> <body
> <ul
> <li
> <img
src
="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
alt
="Aleq"
> < p class= '' hljs-name '' lithium> <li
> <img
src
="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
alt
="Aleq"
> < phosphorus class= '' hljs-name '' lithium> <li
> <img
src
="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
alt
="Aleq"
> < p class= '' hljs-name '' fifty-one> < phosphorus class= '' hljs-name '' ul> < phosphorus class= '' hljs-name '' soundbox> < p class= '' hljs-name '' hypertext markup language>Try it Yourself »
here learn another example which incorporate several soar effect along hover : zoom in, soar come out of the closet, slide, rotate, film over, grayscale, sepia and blur+grayscale .
Example of adding various zoom effects on hover:
<html
> <head
> <title
>Title of the document < phosphorus class= '' hljs-name '' deed> <style
>h1
{margin
:30px
15px
0
;font-weight
:300
; }h2
{margin
:60px
15px
0
;padding
:0
;font-weight
:300
; }.column
{margin
:15px
15px
0
;padding
:0
; }.column
:last-child
{padding-bottom
:60px
; }.column
::after
{content
:''
;clear
: both ;display
: freeze ; }.column
div
{position
: relative ;float
: bequeath ;width
:300px
;height
:200px
;margin
:0
0
0
25px
;padding
:0
; }.column
div
{margin-left
:0
; }.column
div
span
{position
: absolute ;bottom
: -20px
;left
:0
;z-index
: -1
;display
: freeze ;width
:300px
;margin
:0
;padding
:0
;color
:#444
;font-size
:18px
;text-decoration
: none ;text-align
: center ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ;opacity
:0
; }figure
{width
:300px
;height
:200px
;margin
:0
;padding
:0
;background
:#fff
;overflow
: concealed ; }figure
:hover
+span
{bottom
: -36px
;opacity
:1
; }.hover01
figure
img
{ -webkit-transform
:scale
(1
) ;transform
:scale
(1
) ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover01
figure
:hover
img
{ -webkit-transform
:scale
(1.3
) ;transform
:scale
(1.3
) ; }.hover02
figure
img
{width
:300px
;height
: car ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover02
figure
:hover
img
{width
:350px
; }.hover03
figure
img
{ -webkit-transform
:scale
(1.5
) ;transform
:scale
(1.5
) ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover03
figure
:hover
img
{ -webkit-transform
:scale
(1
) ;transform
:scale
(1
) ; }.hover04
figure
img
{width
:400px
;height
: car ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover04
figure
:hover
img
{width
:300px
; }.hover05
figure
img
{margin-left
:30px
; -webkit-transform
:scale
(1.5
) ;transform
:scale
(1.5
) ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover05
figure
:hover
img
{margin-left
:0
; }.hover06
figure
img
{ -webkit-transform
:rotate
(15deg
)scale
(1.4
) ;transform
:rotate
(15deg
)scale
(1.4
) ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover06
figure
:hover
img
{ -webkit-transform
:rotate
(0
)scale
(1
) ;transform
:rotate
(0
)scale
(1
) ; }.hover07
figure
img
{ -webkit-filter
:blur
(3px
) ;filter
:blur
(3px
) ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover07
figure
:hover
img
{ -webkit-filter
:blur
(0
) ;filter
:blur
(0
) ; }.hover08
figure
img
{ -webkit-filter
:grayscale
(100%
) ;filter
:grayscale
(100%
) ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover08
figure
:hover
img
{ -webkit-filter
:grayscale
(0
) ;filter
:grayscale
(0
) ; }.hover09
figure
img
{ -webkit-Read more : Zoom Meetings
filter
:sepia
(100%
) ;filter
:sepia
(100%
) ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover09
figure
:hover
img
{ -webkit-filter
:sepia
(0
) ;filter
:sepia
(0
) ; }.hover10
figure
img
{ -webkit-filter
:grayscale
(0
)blur
(0
) ;filter
:grayscale
(0
)blur
(0
) ; -webkit-transition
:.3s
ease-in-out ;transition
:.3s
ease-in-out ; }.hover10
figure
:hover
img
{ -webkit-filter
:grayscale
(100%
)blur
(3px
) ;filter
:grayscale
(100%
)blur
(3px
) ; } < p class= '' hljs-name '' dash> < phosphorus class= '' hljs-name '' head> <body
> <h1
>Hover over the images to see the effect < phosphorus class= '' hljs-name '' h1> <h2
id
="demo01"
>1. Zoom In #1 < phosphorus class= '' hljs-name '' h2> <div
class
="hover01 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Zoom in one"
/ > < p class= '' hljs-name '' design> <span
>Hover < p class= '' hljs-name '' span> < phosphorus class= '' hljs-name '' div> < p class= '' hljs-name '' div> <h2
id
="demo02"
>2. Zoom In #2 < phosphorus class= '' hljs-name '' h2> <div
class
="hover02 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Zoom in two"
/ > < p class= '' hljs-name '' figure> <span
>Hover < phosphorus class= '' hljs-name '' bridge> < p class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> <h2
id
="demo03"
>3. Zoom Out #1 < p class= '' hljs-name '' h2> <div
class
="hover03 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Zoom out one"
/ > < phosphorus class= '' hljs-name '' calculate> <span
>Hover < p class= '' hljs-name '' span> < p class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> <h2
id
="demo04"
>4. Zoom Out #2 < p class= '' hljs-name '' h2> <div
class
="hover04 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Zoom out two"
/ > < p class= '' hljs-name '' figure> <span
>Hover < phosphorus class= '' hljs-name '' couple> < p class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> <h2
id
="demo05"
>5. Slide < phosphorus class= '' hljs-name '' h2> <div
class
="hover05 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Slide"
/ > < p class= '' hljs-name '' figure> <span
>Hover < p class= '' hljs-name '' span> < phosphorus class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> <h2
id
="demo06"
>6. Rotate <small
>(+Zoom Out) < phosphorus class= '' hljs-name '' minor> < phosphorus class= '' hljs-name '' h2> <div
class
="hover06 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Rotate"
/ > < p class= '' hljs-name '' visualize> <span
>Hover < phosphorus class= '' hljs-name '' cross> < phosphorus class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> <h2
id
="demo07"
>7. Blur < phosphorus class= '' hljs-name '' h2> <div
class
="hover07 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Blur"
/ > < phosphorus class= '' hljs-name '' visualize> <span
>Hover < p class= '' hljs-name '' bridge> < phosphorus class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> <h2
id
="demo08"
>8. Gray Scale < p class= '' hljs-name '' h2> <div
class
="hover08 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Gray Scale"
/ > < phosphorus class= '' hljs-name '' calculate> <span
>Hover < p class= '' hljs-name '' span> < p class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> <h2
id
="demo09"
>9. Sepia < phosphorus class= '' hljs-name '' h2> <div
class
="hover09 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Sepia"
/ > < p class= '' hljs-name '' figure> <span
>Hover < p class= '' hljs-name '' span> < phosphorus class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> <h2
id
="demo10"
>10. Blur + Gray Scale < p class= '' hljs-name '' h2> <div
class
="hover10 column"
> <div
> <figure
> <img
src
="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"
alt
="Blur and Gray Scale"
/ > < p class= '' hljs-name '' figure> <span
>Hover < p class= '' hljs-name '' straddle> < p class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> < p class= '' hljs-name '' soundbox> < p class= '' hljs-name '' hypertext markup language>Try it Yourself »
Example of zooming in the background image on hover:
<html
> <head
> <style
>.content
{width
:300px
;height
:200px
;border
:1px
hearty#000000
;overflow
: hidden ;position
: relative ;cursor
: arrow ; }.content
div
{width
:100%
;height
:100%
;background
:url
("http://w3docs.com/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg"
) ;background-position
: center field ;background-size
: cover ;background-repeat
: no-repeat ;transition
: all1s
; }.content
div
:hover
{transform
:scale
(1.5
) ; } < phosphorus class= '' hljs-name '' style> < p class= '' hljs-name '' drumhead> <body
> <p
>Hover over the images to see the effect. < phosphorus class= '' hljs-name '' phosphorus> <div
class
="content"
> <div
> < phosphorus class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' div> < p class= '' hljs-name '' body> < p class= '' hljs-name '' hypertext markup language>Try it Yourself »
Example of creating a quick zoom-in effect on hover:
<html
> <head
> <style
>.content
{overflow
: obscure ;height
:400px
; }.zoom
{height
:400px
;position
: relative ;text-align
: kernel ;cursor
: pointer ;margin-bottom
:10px
;background-position
: center ;background-size
: cover ;overflow
: obscure ;background-image
:url
('http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg'
) ; -webkit-transition
: all0.3s
ease-in-out ; }.zoom
:hover
{ -webkit-transform
:scale
(1.6
,1.6
) ;transform
:scale
(1.6
,1.6
) ; -webkit-transition
: all0.3s
ease-in-out ; } < phosphorus class= '' hljs-name '' style> < p class= '' hljs-name '' head> <body
> <p
>Hover over the images to see the effect. < phosphorus class= '' hljs-name '' p> <div
class
="content"
> <div
class
="zoom"
> < p class= '' hljs-name '' div> < p class= '' hljs-name '' div> < p class= '' hljs-name '' body> < p class= '' hljs-name '' hypertext markup language>Try it Yourself »
Example of adding a zoom-in effect with rotation on hover:
<html
> <head
> <style
>.content
{width
:360px
;height
:360px
;overflow
: concealed ;cursor
: cursor ; }.content
img
{transition
: transform.5s
ease-in-out ; }.content
:hover
img
{transform
:scale
(2
)rotate
(35deg
) ; } < phosphorus class= '' hljs-name '' manner> < phosphorus class= '' hljs-name '' head> <body
> <p
>Hover over the images to see the effect. < phosphorus class= '' hljs-name '' phosphorus> <div
class
="content"
> <img
src
="/uploads/media/default/0001/05/6b9dca3dac1686cb8c6bb4bdc3c26cb17ec0b970.png"
alt
="Image"
/ > < p class= '' hljs-name '' div> < p class= '' hljs-name '' body> < p class= '' hljs-name '' hypertext markup language>Try it Yourself »
Example of adding a zoom-in effect with a pointer on hover:
<html
> <head
> <style
>.content
{width
:600px
;height
:400px
;overflow
: obscure ;cursor
: pointer ; }.content
img
{max-width
:100%
;transform-origin
:65%
75%
;transition
: transform1s
, percolate.5s
ease-out ; }.content
:hover
img
{transform
:scale
(5
) ; } < phosphorus class= '' hljs-name '' style> < p class= '' hljs-name '' pass> <body
> <p
>Hover over the images to see the effect. < phosphorus class= '' hljs-name '' p> <div
class
="content"
> <img
src
="https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg"
alt
="Example image"
/ > < phosphorus class= '' hljs-name '' div> < phosphorus class= '' hljs-name '' body> < p class= '' hljs-name '' hypertext markup language>Try it Yourself »
Example of creating a zoom-in effect with slow-motion on hover:
<html
> <head
> <style
>.content
{width
:600px
;height
:400px
;overflow
: concealed ;cursor
: arrow ; }.content
img
{max-width
:100%
;transform-origin
:50%
65%
;transition
: transform5s
, filter3s
ease-in-out ;filter
:brightness
(150%
) ; }.content
:hover
img
{filter
:brightness
(100%
) ;transform
:scale
(3
) ; } < phosphorus class= '' hljs-name '' dash> < phosphorus class= '' hljs-name '' head> <body
> <p
>Hover over the images to see the effect. < p class= '' hljs-name '' p> <div
class
="content"
> <img
src
="https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg"
alt
="Example image"
/ > < p class= '' hljs-name '' div> < p class= '' hljs-name '' body
Try it Yourself »
