From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Blur and focus rollover effects

Blur and focus rollover effects - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Blur and focus rollover effects

“

- [Instructor] Hi, this is Chris Converse and in this episode, we'll create a rollover effect that blurs a series of items, then focuses the specific item you're rolling over, complete with an animated transition. And, this technique will work in all modern browsers with the exception of Internet Explorer 11. So, if you'd like to follow along, download the exercise files and let's begin by opening the HTML file in a text editor. So, to begin, let's take a look at our HTML file. So, with the file open, we can see that inside of the body area, we have a div with an ID of gallery and then we have a series of anchor links. And each anchor link has an image tag pointing to a different JPG file. And, if you open this in a browser, you'll see the layout looking like this. And so, to add our rollover effects, let's go back to the exercise files and let's open up style.css in our text editor. And, once you have the CSS file open, let's scroll down a little bit. Let's look for the rule that…

Contents