How to make read more text using hover effect

read more button hover effects
on hover show text with animation
show text on hover css
display text on mouseover for image in html
text hover animation css
image hover text
text fade out / read more link
navigation hover effects

I have 5 texts and 2 of them are hidden. In js code below I can see these 2 texts using click, but I need to use hover effect. How can I solve that?

js:

$('p#string').click(function(e) {
  e.preventDefault();
  $(this).find('span.span_icon').toggleClass('active');
});

$('.btn').on('click', function () {
    if ($(this).parent().height() >= 50) {
        $(this).parent().animate({
            height: 25 + 'px'
        });
        $(this).parent().parent().removeClass('active-animated').css('zIndex','1');
        $(this).parent().parent().parent().css('zIndex','1');
    } else {
        $(this).parent().animate({
            height: 100 + '%'
        });
        $(this).parent().parent().parent().css('zIndex','9999');
        $(this).parent().parent().addClass('active-animated');
    }
});    

html:

<div class="bottom">
<a href="">First Text</a>
<a href="">Second Text</a>
<a href="">Third Text</a><br>
<a href="">Fourth Text</a>
<a href="">Fifth Text</a>    
<p id="string" class="btn"><span class="span_icon">+</span></p>
</div>

I need to make hover effect, I mean when I hover on my block of texts I need to see another 2 hidden texts. Help me in this question.

You could always just do this with PURE CSS if that works for you.

.bottom {
  overflow: hidden;
  height: 25px;
  width: 100%;
}

.bottom a {
  height: 25px;
  display: inline-block;
}

#wrap {
  position: relative;
  margin-bottom:25px;
}

#btn {
  cursor: pointer;
  position: absolute;
  bottom: -50px;
  left: 0;
  height: 30px;
  width: 30px;
}

#btn:hover+.bottom {
  height: auto;
}
<div id="wrap">
  <p id="btn">+</p>
  <div class="bottom">
    <a href="">First Text</a>
    <a href="">Second Text</a>
    <a href="">Third Text</a><br>
    <a href="">Fourth Text</a>
    <a href="">Fifth Text</a>
  </div>
</div>

Creative Read More Button CSS3 WITH COOL HOVER EFFECT , Creative Read More Button CSS3 WITH COOL HOVER EFFECT. YouNesTuts. Loading Duration: 12:04 Posted: Oct 23, 2017 Css Image Hover Effects - Slide Image On Hover - Html Css Profile card UI Design with hover effects - Duration: 6:05. Online Tutorials 28,609 views

Instead of $('.btn').on('click') use $('.btn').on('mouseOver')

Text Fade Out / Read More Link, CSS3 gradients are used for the text fading and jQuery is used to handle the We can make it more elegant by using JavaScript and the easy animations of� Definition and Usage. The :hover selector is used to select elements when you mouse over them.. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

Css selector can be user for hover.Below code well change the "a" tag to yellow background using css selector

a:hover { 
  background-color: yellow;
}

For hover javascript functions jquery can be used as below

   

 $('.btn').hover(function () {
        if ($(this).parent().height() >= 50) {
            $(this).parent().animate({
                height: 25 + 'px'
            });
            $(this).parent().parent().removeClass('active-animated').css('zIndex','1');
            $(this).parent().parent().parent().css('zIndex','1');
        } else {
            $(this).parent().animate({
                height: 100 + '%'
            });
            $(this).parent().parent().parent().css('zIndex','9999');
            $(this).parent().parent().addClass('active-animated');
        }
    });
   

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="bottom">
    <a href="">First Text</a>
    <a href="">Second Text</a>
    <a href="">Third Text</a><br>
    <a href="">Fourth Text</a>
    <a href="">Fifth Text</a> 
    <br>
    <Button id="string" class="btn"><span class="span_icon">+</span></Button>
    </div>

Hover box – text over images on hover and more…, Or just read the instructions how to make it by yourself. Width and height of boxes are not defined in my CSS or HTML code, they fit provided� A section of text that fades into the nothingness. But wait, a beacon. A "read more" link shines through the darkness. Click upon it and all text is revealed! CSS3 gradients are used for the text fading and jQuery is used to handle the animated reveal.

Creating mouseover text with HTML - knowledgebase, You can do this by either finding the text you want in the HTML editor, or by typing it css to a section of text (see the bottom of this page for some brief notes on� A more complex :hover example. To better understand what CSS hover effects are available, see a bit more complicated example below. As you hover the cursor over the element, a dropdown menu will appear. Then, as you hover on its options, they will be highlighted:

How To Create Image Hover Overlay Effects, Image Overlay Fade. Learn how to create a fading overlay effect to an image, on hover: Example. Fade in text:. You can alter the size of divs or images using the hover effect above. You can also reverse the effect and make your images grow larger than their current size by changing the scale values

How To Display an Element on Hover, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� CSS Text Hover Effect: using CSS, we can make lots of Amazing things like this hover effect. This effect is nothing, you can make a lot of advanced things by using the CSS which you will never have thought about. You have seen such type of effect in many places before. After seeing, you think like to make something like that. Trust me, it’s

Comments
  • If you're using jQuery, just change click to mouseover to fire the event when a user hovers over the bound element.
  • why two click $('p#string') and $('.btn') both targeted element are same
  • @AndroidNoobie Thank you! but how can I make to all block, not only to icon?
  • Thank you, but how can I make hover on all block not only to icon?
  • What do you mean by all block? .bottom?
  • yes, I need to hover on .bootom and could you show it using my js code? I tried to change classes but it did not help
  • Thank you, it works! and one more question. when I see hidden text, my lower blocks move down. How to avoid that?
  • but if I want to hover on block, not only on icon, then how can I do that? Thank you.
  • With $('.bottom').on('mouseOver'). This means that every time you hover on any part of your bottom element (including three texts inside) you will see all five of them.
  • @AsasSas i haved attached a jquery function to handed hover using javascript. As you have asked :)