How to hyperlink hover effect image without messing up the layout for website template-CodePudding

I'm using this html5 website template.

Is there a simple way to add hyperlink to another website when I hover to the image and click?

I believe something to do with the bootstrap grid (class = "col-6 col-12-xsmall work-item").

<!-- Portfolio 1 -->
                <section id="two">
                    <h1><strong>My Portfolio</strong></h1>
                    <div >
                        <article class = "col-6 col-12-xsmall work-item">
                            <a href="images/fulls/01.jpg" class ="image fit thumb"><img src="images/thumbs/01.jpg" alt="" /></a>
                            <h3>SQL: COVID-19 Data Exploration</h3>
                            <p>This is a project about COVID-19 cases.</p>
                        </article>
                        <article >
                            <a href="images/fulls/02.jpg" ><img src="images/thumbs/02.jpg" alt="" /></a>
                            <h3>Tableau: COVID-19 Dashboard</h3>
                            <p>This is a project about COVID-19 cases dashboard.</p>
                        </article>
                        <article >
                            <a href="images/fulls/03.jpg" ><img src="images/thumbs/03.jpg" alt="" /></a>
                            <h3>Portfolio Project 3</h3>
                            <p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
                        </article>
                        <article >
                            <a href="images/fulls/04.jpg" ><img src="images/thumbs/04.jpg" alt="" /></a>
                            <h3>Portfolio Project 4</h3>
                            <p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>

enter image description here

CodePudding user response：

To show a tooltip with a link when the image is hovered, create an <a> tag immediately after the image and set it to display: none unless it or the image are hovered, like so:

.image-container {
  position: relative;
}

img:not(:hover) a:not(:hover) {
  display: none;
}

img a {
  padding: 5px 10px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 2px 2px 4px 2px black;
  position: absolute;
  top: 0;
  left: 0;
  margin: 20px;
  max-width: calc(100% - 60px);
}

<div >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Jonquil_flowers06.jpg/473px-Jonquil_flowers06.jpg" />
  <a href="https://commons.wikimedia.org/wiki/Flowers">Here's where this picture came from</a>
</div>

CodePudding user response：

Based on your comment above, you don't need anything fancy. Your images were already wrapped in anchor tags. You just need to add the URL to the href attribute and you're good to go. I've redone my answer below.

Hope this helps.

<!-- Portfolio 1 -->
<section id="two">
  <h1><strong>My Portfolio</strong></h1>
  <div >
    <article >
      <a href="https://www.google.com" target="_blank" >
        <img src="https://placekitten.com/100/100" alt=""/>
      </a>      
      <h3>SQL: COVID-19 Data Exploration</h3>
      <p>This is a project about COVID-19 cases.</p>
    </article>
    <article >
      <a href="https://www.facebook.com" target="_blank" >
        <img src="https://placekitten.com/100/100" alt=""/>
      </a>
      <h3>Tableau: COVID-19 Dashboard</h3>
      <p>This is a project about COVID-19 cases dashboard.</p>
    </article>
    <article >
      <a href="https://www.yahoo.com" target="_blank" >
        <img src="https://placekitten.com/100/100" alt=""/>
      </a>
      <h3>Portfolio Project 3</h3>
      <p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
    </article>
    <article >
      <a href="https://www.microsoft.com" target="_blank" >
        <img src="https://placekitten.com/100/100" alt=""/>
      </a>
      <h3>Portfolio Project 4</h3>
      <p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
    </article>
  </div>
</section>