Is it possible to add a Link to a mask in HTML - html

For example on this http://codepen.io/web-tiki/pen/meskA how would one add a a link to the triangles when they are clicked?
<div class="t">
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
</div>


Like this:
<div class="wrap">
<a href="somewhere.com">
<div class="triangle"></div>
<div class="mask"></div>
</a>
</div>
Or dynamically with jQuery:
$(".wrap").each(function(){
$(this).find("div").wrapAll( "<a href='link.com' />");
});


you could add onclick events on each wrap divs you got.
<div class="wrap" onclick="location.href = 'www.yoursite.com'">

Related

Is there any way to make the image clickable, to get redirected to other asp.net page?

How can I make the image clickable so I can be redirected to other asp net page?
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>
</div>

just wrap image into anchor tag
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>
</div>

<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>

Force element to move up

I have a box that is rendering lower and I cant figure out why.
<div id="hint-history" class="popup">
<div class="row">
<div class="col" id="closehistorypopup">
<div class="body">
<button class="x">
<span class="sprite close"></span>
</button>
<div class="title">Hint History</div>
<div class="lists">
<?php for($i=0;$i<6;$i++) { ?>
<div class="list history[[$i]]" id="history[[$i]]">
<div class="info">
<div class="picture monophoto">
<div class="text">BO</div>
<div class="img" style="background-image: url();"></div>
</div>
<div class="right">
<div class="lineone">John Smith</div>
<div class="linetwo">Daily Essentials</div>
</div>
</div>
<div class="boxes">
<div class="left">
<div class="box box1"></div>
</div>
<div class="right">
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</div>
<a class="cbutton whiteonblack">VIEW LIST<!--SEE <span class="owner">JOHN'S</span>--></a>
</div>
<?php } ?>
<?php $i++; $privateCount = 1; ?>
#if ($privateCount > 0)
<div id="privatecard" class="list history[[$i]]">
<div class="info">
<div class="picture monophoto" style="visibility: hidden;">
</div>
<div class="right">
<p id="privatecounter">
#if ($privateCount == 1)
There is [[$privateCount]] private user.
#else
There are [[$privateCount]] private users.
#endif
</p>
<div class="linetwo"> </div>
<div class="linetwo"> </div>
<div class="linetwo"> </div>
</div>
</div>
<div class="boxes">
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
#endif
</div>
No matter what I do it wont budge.
.privatecard {
margin-top: -500px !important;
}
.privatecard {
padding-bottom: 500px !important;
}
//etc
How can I force it to move up?

Post a fiddle?
I've had this issue in the past though, and I've resolved it by a combination of making sure all inline-block elements are also vertical-align:top; (or any other state, as long as it's all consistent). AND then, set a min-height to the parent container, and a min-height to all the inline-block'd elements

Target every other children of each parent

I've been struggling with this for a while, and it's time for some help.
I have this:
<div class="news-images">
<div class="col-md-12">
<div class="grid">
<div class="effect"></div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect"></div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect"></div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect"></div>
</div>
</div>
</div>
I want to target every other (a 2n+1, odd/even kind of thing) instance of the "effect" class. Is this possible with pure CSS or do i need some JavaScript?
Thanks!

Do You Want this? if not, Please explain briefly.
.col-md-12:nth-child(odd) .effect{
background: black;
color: #fff;
}
.col-md-12:nth-child(even) .effect{
background: blue;
color: #fff;
}
<div class="news-images">
<div class="col-md-12">
<div class="grid">
<div class="effect">hello world!</div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect">hello world!</div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect">hello world!</div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect">hello world!</div>
</div>
</div>
</div>

Fix HTML/CSS Animations performance

I have made a HTML page with css animation and transitions
<div class="container-fluid" id="team">
<div class="row first">
<div class="wrapper"></div>
</div>
<div class="row second">
<div class="wrapper"></div>
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.0.name}}</h2>
<h5>{{team.0.position}}</h5>
<p>{{team.0.description}}</p>
Learn more about {{team.0.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.6.name}}</h2>
<h5>{{team.6.position}}</h5>
<p>{{team.6.description}}</p>
Learn more about {{team.6.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper"></div>
</div>
<div class="row third">
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.3.name}}</h2>
<h5>{{team.3.position}}</h5>
<p>{{team.3.description}}</p>
Learn more about {{team.3.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.2.name}}</h2>
<h5>{{team.2.position}}</h5>
<p>{{team.2.description}}</p>
Learn more about {{team.2.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.4.name}}</h2>
<h5>{{team.4.position}}</h5>
<p>{{team.4.description}}</p>
Learn more about {{team.4.firstName}}
</div>
</div>
<img src="">
</div>
</div>
<div class="row fourth">
<div class="wrapper"></div>
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.5.name}}</h2>
<h5>{{team.5.position}}</h5>
<p>{{team.5.description}}</p>
Learn more about {{team.5.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.1.name}}</h2>
<h5>{{team.1.position}}</h5>
<p>{{team.1.description}}</p>
Learn more about {{team.1.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper"></div>
</div>
<div class="row fifth">
<div class="wrapper"></div>
<div class="wrapper join">
<a href="">
<span>+ Join</span>
</a>
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.7.name}}</h2>
<h5>{{team.7.position}}</h5>
<p>{{team.7.description}}</p>
Learn more about {{team.7.firstName}}
</div>
</div>
<img src="">
</div>
</div>
<div class="row sixth">
<div class="wrapper"></div>
<div class="wrapper blank"></div>
<div class="wrapper"></div>
</div>
<div class="row seventh">
<div class="wrapper"></div>
<div class="wrapper"></div>
</div>
Full working version is avaliable here: http://jsfiddle.net/xs4mm5jd/
As you can see it works fine and animations is fast and smooth.
However, when I added some images: http://jsfiddle.net/xs4mm5jd/1/ animation is glichy. Is there any solution to speed up the performance?

Even though I don't see bad performance in your fiddle, you can trigger hardware acceleration when animating.
Some people use a sort of hack applying either transform: translateZ(0); or transform: translate3d(0, 0, 0); to the animated elements.
Here you have a fiddle to test if you see any performance gain: http://jsfiddle.net/gleezer/xs4mm5jd/3/
Here's an article about it.
A second, newer (and probably better) alternative is to use the will-change property in your CSS, for example: will-change: transform;
Read more about it here.

CSS - target last instance of div

I have a div structure as below and i want to only target the last .pcontain on the page so i can remove the border-right - how do i go about it?
<div class="container">
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
</div>

Working Fiddle
Use last child
.postcontainer:last-child .pcontain{
background: black;
color: white;
}
Read more about last-child here

You can use the last-child pseudo-class like:
.postcontainer:last-child .pcontain {
color: darkolive;
}
http://jsfiddle.net/ZZMZn/10/