Build Your Own Business Website header image

How to Add a Hover Style to a Thesis 2.1 Query Box

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we demonstrate how to add styling to the hover state of a Thesis 2.1 query box and add opacity to the image.

Video Transcript

Member: It’s one little off, yeah.

Rick: Yeah, got it.

Member: Well, you can see there are 8 query boxes here with pages inside of, inside them.

Rick: Uhuh.

Member: And I want to style a query box by putting the like a hover but um…

Rick: Well, you don’t have an a right? So, it’s just,

           .query_box:hover {}
And then say background-color: red;
.query_box:hover {
background-color: red;

Right, so now when you hover over it it changes color.

Member: Okay, and also the opacity of the image. Probably, yeah.

Rick: Well, the problem you’re…you want to change the um…well, what is it that you wanted to change when you hover over it?

Member: So, when you hover over query box I wanted the whole query box be a different color. And that the page disappears behind this color.

Rick: And this is not doing it right now with the background color of red?

Member: Yeah,  yeah because the image is before the color. So, color is kind of behind the image.

Rick: You want the image to go away then?

Member: I don’t know what do you mean?

Rick: You want the image to be covered up by the color when you hover over?

Member: Yeah, yeah, exactly exactly.

Rick: Okay, so you could  add another one here,

           .query_box:hover img {}

And then you could give it a transparency or what is that; opacity, that’s what it is. For example,

           .query_box:hover {
opacity: 0.5;

And now,

Member: Oh, cool.

Rick: The image just kind of, right the image becomes semi-transparent. You change it into 0.8,

Member: Alright.

Rick: Right?

Member: Yeah, yeah I see it. That was so simple for you.

Rick: Well, I’ve been doing it a long so.

Member: I know. Cool.

Rick: Okay.

Member: That’s really cool, yeah. I’ll play with this.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment