CODEWITHSUNDEEP
htmlcss
user3117275
user3117275

Reputation: 367

CSS and <a href> issue

I have a rollover effect over an image which can be seen here: http://www.sdimmigrationlawyers.com/ (bottom of page - deportation image)

I want to add a link to it, but my tag isn't working. How should I implement it to (1) have the rollover effect, and (2) have the link?

CSS:

<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
    <a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
        <div class="mask"></div>
    </a>
    <p>
        <a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense"></a>
    </p>
    <div class="content">
        <h2>Deportation Defense</h2>
    </div>
</div>

HTML:

    <div class="paragraph_dui_crime_box2">
<h2>San Diego Deportation Lawyer</h2>
<div class="view view-sixth">
    <img class="alignleft wp-image-335 size-full" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg" alt="" />
    <a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
        <div class="mask"></div>
    </a>
    <div class="content">
        <h2>Deportation Defense</h2>
    </div>
</div>

Upvotes: 1

Views: 69

Answers (2)

aphextwix
aphextwix

Reputation: 1876

You could try wrapping the <a> tag around the whole section like so : 

<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
   <img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
   <div class="mask"></div>
   <p>
     <a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense"></a>
   </p>
   <div class="content">
       <h2>Deportation Defense</h2>
   </div>
</a>

Upvotes: 2

user1745465
user1745465

Reputation:

Your code with the headline "CSS" is HTML, so I assume it's what's the HTML-code of your page.

If you haven't any restrictions in HTML-markup, do the following and make sure that the DIV with the h2 is wrapped in an anchor leading somewhere:

<a href="...">
    <div class="content"><h2>Deportation Defense</h2></div>
</a>

Currently, your anchor surrounds something with no content (that is not clickable), the content on the other side is not properly wrapped in an anchor (so it's neither clickable).

Upvotes: 2

Related Questions