0

With the following css/htms

 <p>&nbsp;</p> <p><a href="#bottom"><img title="power gains" src="{{media url="wysiwyg/powergains.png"}}" alt="show power gains"></a></p> <p><a title="Navistar" href="http://bluesparkautomotive.com/instructionfiles/073_ppb.pdf" target="_blank"><img src="{{media url="wysiwyg/installation.png"}}" alt="" /></a></p>

I need to target the bottom image with the following:

img:hover{box-shadow: 6px 6px 20px rgba(0,0,0,.6); transform:scale(1.02);} img:focus{box-shadow: 12px 12px 25px rgba(0,0,0,.7); width: 46%; transform: none;}

And leave all other images without the formatting.

Improve this question
0

2 Answers 2

Reset to default
1

You can use p > a[title="Navistar"] > img. The a[title="Navistar"] is an attribute selector.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Since you need a specific image to be chosen, you can add an id tag to the img element so that it can be specifically selected. id tags are unique and cannot be shared, but the id name can be chosen by yourself.

<img src="" id="id123" />

And in your CSS, use a # to specify that you are looking for an id:

#id123:hover {[css]}

This is not really related to your question but it would be good for future use. You can use a class tag if you want to choose a group of elements to be styled the same way. This can be done by:

<img src="" class="class123" />

class is not specific to 1 element but can be shared among a group of elements that require the same style. You can locate such elements with . in your CSS:

.class123:hover {[css]}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.