| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Use the CSS Transform scale Property to Scale an Element on Hover | 
					
						
							|  |  |  | --- | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | # Use the CSS Transform scale Property to Scale an Element on Hover
 | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Solutions
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details><summary>Solution 1 (Click to Show/Hide)</summary> | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-03-09 19:26:31 +05:30
										 |  |  | ```html | 
					
						
							|  |  |  | <style> | 
					
						
							|  |  |  |   div { | 
					
						
							|  |  |  |     width: 70%; | 
					
						
							|  |  |  |     height: 100px; | 
					
						
							|  |  |  |     margin:  50px auto; | 
					
						
							|  |  |  |     background: linear-gradient( | 
					
						
							|  |  |  |       53deg, | 
					
						
							|  |  |  |       #ccfffc, | 
					
						
							|  |  |  |       #ffcccf | 
					
						
							|  |  |  |     ); | 
					
						
							|  |  |  |   } | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-03-09 19:26:31 +05:30
										 |  |  |   div:hover { | 
					
						
							|  |  |  |     transform: scale(1.1); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | </style> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <div></div> | 
					
						
							|  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | </details> |