CODEWITHSUNDEEP
htmlcss
Clarke Cribb
Clarke Cribb

Reputation: 269

Hyperlinking pages on mobile

I have ran into a bit of a problem, on my desktop version of my website, I have hover states for each project. For mobile these obviously will not work so i therefore need the link to be on the projects themselves. When I have put the links in they don't seem to be working. Can anybody help?

Much appreciated.

HTML:

<div class="projectswrap">
    <div class="project project1"><a href="project1.html">
        <div class="project-hover project-hover1"><h2 class="item-title">Rebrand: Thairapy Hair & Beauty</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
    <div class="project project2"><a href="project2.html">
        <div class="project-hover project-hover2"><h2 class="item-title">Gain Theory: Brand and Identity</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
    <div class="project project3"><a href="project3.html">
        <div class="project-hover project-hover3"><h2 class="item-title">Information Design</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
    <div class="project project4"><a href="project4.html">
        <div class="project-hover project-hover4"><h2 class="item-title">YouGov Competition: "I can't beleaf it"</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
        <div class="project project5"><a href="project5.html">
        <div class="project-hover project-hover5"><h2 class="item-title">Embrace's financial handouts</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
</div>

CSS:

/*This is the container for portfolio images*/
.projectswrap {
    margin:0 auto;
    background-color:#f7c8c6;
    position:absolute;
    top:100%;
    width:100%
}

.projectswrap .project {
    width:50%;
    padding-bottom:50%;
    margin:0;
    float:left;
    background:#cceaec;
    position:relative
}

.projectswrap .project .project-hover {
    display:none;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(255,255,255,0.85);
    -webkit-transition:all 5.6s ease;
    -moz-transition:all .6s ease;
    -o-transition:all .6s ease;
    -ms-transition:all .6s ease;
    transition:all .6s ease
}

.projectswrap .project:hover .project-hover {
    display:block
}

.item-title {
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;
    font-size:xx-large;
    font-weight:700
}

.item-cat {
    position:absolute;
    top:50%;
    margin-top:50px;
    width:100%;
    text-align:center;
    font-family:sans-serif;
    font-size:medium;
    font-weight:100
}

Upvotes: 0

Views: 65

Answers (2)

user5283119
user5283119

Reputation: 

.projectswrap .project .project-hover {
display:none;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(255,255,255,0.85);
-webkit-transition:all 5.6s ease;
-moz-transition:all .6s ease;
-o-transition:all .6s ease;
-ms-transition:all .6s ease;
transition:all .6s ease
}

.projectswrap .project:hover .project-hover {
display:block
}

I found an issue, you're using both .project-hover which are both set to display: none; and display:block (You forgot a closing tag here)

Because .project-hover is set to display:none; you can't rewrite .project-hover display:block; Because it will just take the first display argument you chose. If you want it to show when hovered on it's 

.project-hover:hover {
display: block;
}

Hope this helps!

Upvotes: 1

Pepo_rasta
Pepo_rasta

Reputation: 2900

its because you wrapped element which have display:none; when no hover, therefore <a> is empty and therefore it have width and height 0, you can wrap parent div in this <a> tag or give some width and height to a via css when not hovering

<div class="projectswrap">
  <a href="project1.html">
    <div class="project project1">
      <div class="project-hover project-hover1">
        <h2 class="item-title">Rebrand: Thairapy Hair & Beauty</h2>
        <h3 class="item-cat">blah blah blah</h3>
      </div>
    </div>
  </a>
  <a href="project2.html">
    <div class="project project2">
      <div class="project-hover project-hover2">
        <h2 class="item-title">Gain Theory: Brand and Identity</h2>
        <h3 class="item-cat">blah blah blah</h3>
      </div>
    </div>
  </a>
  <a href="project3.html">
    <div class="project project3">
        <div class="project-hover project-hover3">
          <h2 class="item-title">Information Design</h2>
          <h3 class="item-cat">blah blah blah</h3>
        </div>
    </div>
  </a>
  <a href="project4.html">
    <div class="project project4">
      <div class="project-hover project-hover4">
        <h2 class="item-title">YouGov Competition: "I can't beleaf it"</h2>
        <h3 class="item-cat">blah blah blah</h3>
      </div>
    </div>
  </a>
  <a href="project5.html">
    <div class="project project5">
      <div class="project-hover project-hover5">
        <h2 class="item-title">Embrace's financial handouts</h2>
        <h3 class="item-cat">blah blah blah</h3>
      </div>
    </div>
  </a>
</div>

Upvotes: 0

Related Questions