jquery - Hover effect over image as a link ideas -


i have image on page use link. trying effect when hover on image become little darker (transparent dark) , on image appear text saying "view". using bootstrap, needs responsive.

i tried categorieimg:a hover in css doesn't seems respond. if can done jquery, suggestions welcomed.

my html:

@extends ('master')   @section('content')  <div class="row">      <div class="col-md-12">         <h1 class="text-center">myhero shop</h1> <br><br>     </div>  </div>   <div class="row">       @if ($categories)     @foreach($categories $category)      <div class="col-md-4 col-sm-6 text-center">          <h3 >{{ $category['title'] }} </h3>            <p class><a href="{{ url('shop/'. $category['url']) }}" class="categorieimg"><img width="250" src="{{ asset('images/' . $category['image']) }}"></a></p>           <p>{!! $category['article']!!}</p>        </div>      @endforeach      @else      <div class="col-md-12"> <br><br>         <p class="text-center" style="font-size: 18px"><b>no categories found...</b></p>         <div              @endif     </div>     @endsection 

to able achieve want, should use png image not jpef. because jpeg images take full space of element , can't show background-color anywhere.

see working demo.

img {    width: 200px;    height: 200px;    background-color: red;  }    img:hover {    background-color: gray;  }
<img src="https://cdn4.iconfinder.com/data/icons/commerce-5/100/.svg-6-128.png" alt="">


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -