How exactly would I turn this into a link?

Code:



   html,
    body {
      height: 100%;
      background: #000;
      color: #fff;
      padding: 0;
      margin: 0;
    }
    
    .outer {
      display: table;
      height: 100%;
      margin: 0 auto;
      width: 100%;
    }
    
    .tcell {
      display: table-cell;
      vertical-align: middle;
    }
    
    .wrap {
      max-width: 400px;
      position: relative;
      margin: auto;
      border: 0px solid #5CB378;
    }
    
    .inner {
      position: relative;
      height: 0;
      padding-bottom: 100%;
      cursor: pointer;
      background-color: black;
    }
    
    
    .image {
      position: absolute;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      height: 100%;
      width: 100%;
      background-color: #000000;
      cursor: pointer;
      overflow: hidden;
    }
    

    
    .image {
      background-color: green;
      background-size: cover;
      border-radius: 50px;
    }



.image:after{
   content:"";   
   position:absolute; 
   left:0;
   top:0;
   right:0;
   bottom:0;
   background-image:url(https://i.imgur.com/WSlJUPf.png);  
   background-repeat:no-repeat; 
   background-size:24.5% Auto; 
   background-position:50% 50%; 
}


<div class='outer'>
  <div class='tcell'>
    <div class='wrap'>
      <div class='inner'>
        <div class='image'  


          

            </div>
          </div>
        </div>
      </div>
    </div>

It is not clear to me from your Fiddle which part you would want to turn into a link (or why).

To create a link, you wrap <a></a> tags around the element you wish to act as an anchor. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.