CODEWITHSUNDEEP
phpcsswordpresstwitter-bootstrap
Hardip Patel
Hardip Patel

Reputation: 85

Anchor tag not working with figure tag of bootstrap

I want to redirect user to the link when he clicks on the figure but anchor tag doesn't work on clicking on the image. But the anchor tag with "CLICK HERE" works.

<a href="http://google.com">
<figure class="effect-ming">

<img src="http://example.com/dd.img" alt="Placeholder" />

    <figcaption>
        <p><?php the_title(); ?></p>
        <a href="<?php the_permalink(); ?>">CLICK HERE</a>
    </figcaption> 
</figure>
</a>

css: 

figure.effect-ming figcaption::before {
  border: 0px solid #fff !important;  
  bottom: 30px;  
  box-shadow: 0 0 0 0px rgba(0, 0, 0, 0) !important;  
  content: "";  
  left: 30px;  
  opacity: 0;  
  position: absolute;  
  right: 30px;  
  top: 30px;  
  transform: scale3d(1.4, 1.4, 1);  
  transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;  
}

Upvotes: 1

Views: 621

Answers (1)

Randy
Randy

Reputation: 9819

You need to close your anchor tag:

<a href="http://google.com">
    <img src="http://example.com/dd.img" alt="Placeholder" />
</a>

<figure class="effect-ming">
    <figcaption>
        <p><?php the_title(); ?></p>
        <a href="<?php the_permalink(); ?>">CLICK HERE</a>
    </figcaption> 
</figure>

I think this would be better. I moved the figure tag because the nesting was incorrect. If you want the image inside the figure, you can do that like this:

<figure class="effect-ming">


    <a href="http://google.com">
        <img src="http://example.com/dd.img" alt="Placeholder" />
    </a>

    <figcaption>
        <p><?php the_title(); ?></p>
        <a href="<?php the_permalink(); ?>">CLICK HERE</a>
    </figcaption> 
</figure>

Upvotes: 1

Related Questions