HTML Introduction to HTML and CSS Getting Familiar with HTML and CSS Building Web Pages with HTML and CSS

The Hover Feature does not work for some reason

I changed the code as the instructor said but after saving and refreshing the page it didn't work

KRIS NIKOLAISEN
KRIS NIKOLAISEN
Pro Student 51,979 Points

Can you take a snapshot of your workspace? It's the camera icon in the upper right corner.

Kevin Gates
Kevin Gates
14,711 Points

Or please share all of your code. Please be sure to use the Markdown Cheatsheet (appears when you leave a comment) to format your code. You use 3 backticks (symbol to the left of the number 1), the name of the language (HTML, CSS, etc.) then paste your code, then 3 more backticks.

It can leave your answer looking like this:

h1 {
font-size: 20px;
}

4 Answers

Jamie Reardon
Jamie Reardon
Front End Web Development Techdegree Student 13,883 Points

First off, it looks like your missing a closing curly brace }. Also, do you have the the transition property declared in the header .profile-image rule? You were also missing the deg value at the end of the rotate value of 360.

header .profile-image {
  transition: all .5s;
}

header .profile-image:hover {
  transform: scale(1.2) rotate(360deg);
}

Ohh I was missing the Deg after 360!! Thanks a lot. :)

Jamie Reardon
Jamie Reardon
Front End Web Development Techdegree Student 13,883 Points

Hi, please add your code by using the Markdown Cheatsheet reference so we can help you further.

header .profile-image:hover {
  transform: scale(1.2) rotate(360);

i closed the tab and reopened it still didn't work. is this a browser problem?

Brett Studer
Brett Studer
4,585 Points

I am having the same problem. Code is identical to video. I believe it must be a browser issue. Does anybody have any idea how to enable this in Firefox?

Edit: I switched my browser to Brave and now the scale and rotate function work but only when I click on the icon.. hmmm