How to build a hover effect with css only, or css+jquery


Tags: jquery,css3,hover

Problem :

Can you help me to build the hover effect, like on screenshot, with css only? Or, with css+jquery. Thanks![enter image description here]1



Solution :

1 make description visible 2 position it 3 profit

example from worked site

css:

.m-gallery-product-item .hover-wrap {
    display: none;
    height: 0;
}


.m-gallery-product-item .item-main:hover .hover-wrap {
    display: block;
    position: relative;
    z-index: 3;
}

html:

<div class="m-gallery-product-item">
 <div class="item-main">...
  <div class="item-img">,</div>
  <div class="item-info">,</div>
  <div class="hover-wrap"> 
   <div class="hover-main">
    <div class="tags"> ,,,,,,,,, </div> 
   </div> 
  </div>
 </div>
</div>

see worked example on ebay.com alibaba.com, many big and popular sell sites used that tick for a long time, just copy-paste it to your code!


    CSS Howto..

    How to Change main menu color?

    CSS - 2 divs side-by-side, one floated - how do I make the other fit next to it without overlapping?

    How to reset input element style

    CSS: how to set the width of form control so they all have the same width?

    How do I align the list items in an
      with my

      ?

    HTML Tables - how can I make all cells other than the last always be wide enough?

    Dompdf: how to get background image to show on first page only

    How to prevent javascript and css messing up?

    With CSS, how would I align this banner and navigation menu to XHTML 1.0 Strict specifications?

    How to fix on Mobile Devices? Custom CSS. (Wordpress)

    How to assign a css class or id to smileys?

    How to appy font color from li:hover to inner a link text using CSS

    div shown with jquery is cropped

    How to reuse and override Css style?

    How do I break the border around text in css?

    how to check css is valid for IE8

    How to select via regex all class notations in css file

    How to style a SVG using CSS in javaFX FXML

    How to positioning an element over another in CSS

    contenteditable does not show pseudoselector :before in safari

    css + thymeleaf - How to auto-adjust displayed screen size?

    How to Determine CSS selector on a DOM object?

    How to make display:flex work for responsiveness - Bootstrap?

    How can I create a good-looking responsive image gallery WITHOUT perfectly sized images?

    How to add JS and CSS to all content parts in an Orchard module

    How to set a menu as selected while selecting its subchild

    How to center an image .logo via css? [duplicate]

    Rails 4: How to style navigation for current page using jQuery

    css: how to access a value that is not used by an element?

    How to make the height of content div proportional?