Ad

How To Hide The URL When Hover Over A Link?

- 1 answer

Would it be possible for when I hover over the image the href won't display the link to the raw video? (bottom left of web browser)?

Also, how can I disable right click so they won't get the video options.

<article>
  <a class="thumbnail" target="_blank" rel="nofollow noreferrer" href="http://vjs.zencdn.net/v/oceans.mp4">
    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />
  </a>
</article>

Since no video tags are being used, I'm not to sure about this.

My idea was maybe the href would toggle a javascript function. The function would pretty much do the same thing. store the raw link in a variable.

Ad

Answer

With CSS only, you can set up a layer on top of the link. Below is an example of using pseudo element :before + some position tricks.

article {
  position: relative;
  display: block;
}
article:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
}
<article>
  <a class="thumbnail" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://vjs.zencdn.net/v/oceans.mp4">
    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />
  </a>
</article>

With JavaScript, try the following approach.

<article>
  <a class="thumbnail" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="javascript:void(0)" onclick="javascript:location.href='http://vjs.zencdn.net/v/oceans.mp4'">
    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />
  </a>
</article>

Ad
source: stackoverflow.com
Ad