Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 67
  • Last Modified:

How can I expand text with explaination

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
Jazzy 1012
Asked:
Jazzy 1012
  • 2
  • 2
1 Solution
 
Julian HansenCommented:
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
 
Jazzy 1012Author Commented:
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
 
Julian HansenCommented:
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
 
Jazzy 1012Author Commented:
Okay thank youu
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now