?
Solved

How can I expand text with explaination

Posted on 2016-11-10
5
Medium Priority
?
58 Views
Last Modified: 2016-11-11
I want to create a homepage. I want to be able to have text that appears like this but when a user hovers over it the text expands (and becomes bigger on where-ever their pointer is at). Is there anyway I could do this?
0
Comment
Question by:Jasmine Ikhreishi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41882397
You can do this with a CSS style
<!doctype html>
<html>
<head>
<style type="text/css">
p {
  font-size: 12px;
}
p:hover {
  font-size: 20px;
}
</style>
</head>
<body>
<p>This is the text</p>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41882399
Also I have like this in a bootstrap blog page
    <h4><small>RECENT POSTS</small></h4>
      <hr>
      <h2>Officially Blogging</h2>
      <h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24, 2015.</h5>
      <h5><span class="label label-success">Lorem</span></h5><br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>

Open in new window

Is there a way I could put a background image just for this block?
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41882514
give the h4 a class (say bgimage)
[code]
<style type="text/css">
h4.bgimage {
  background: url(path/to/image.jpg) no-repeat;
}
</style>
...
<h4 class="bgimage">
...
</h4>

Open in new window

[/code]
If you want a sample suggest you post another question and put your source code and image in it. Then post link here.
0
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41883716
Okay thank youu
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question