Shutterbugg


#1

In the Shutterbugg project, I have a question when you hover your mouse over the download button what CSS style gives it that effect ? if you go to this website https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/index.html# and hover your mouse over the download button it has almost like a shadow effect. How do we create that effect ? I don't think this was shown in the HTML/CSS course.


#2

Hey buddy,

It's not covered properly in a lesson that I can see, but a couple of the other website projects have that CSS in.

What you're looking for is this:

.main a:hover {
 box-shadow: 0 2px 3px rgba(0,0,0,.4);
  transition: 0.5s;
}

Bootstrap is used in most of these projects. Take a look at some of its built-in effects and use them! :smiley_cat:


#3

Hey thanks buddy! Yeah at first I thought it was a javascript code but I didn't take any of the javascript courses yet so I figured none of these "Make a website projects" were dealing with Javascript. Yeah I had a feeling it was the "box-shadow" CSS element name. I never knew about "Transition" though. Thanks!


#4

Also transition is apart of CSS3 not CSS so thats another reason I didn't know about it. They should do courses on HTML5/CSS3 as well.....


#5

Transition just makes it move a slower so it looks better to the eye, but yeah.

It also works with "text-shadow" if you wanted the same effect to only target your text.

Enjoy!


#6

yeah see all of those are CSS3 and not CSS. Code Academy really needs to do courses on CSS3 and HTML5 cause thats a big difference.....