Solved

How can I expand text with explaination

Posted on 2016-11-10
5
35 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
  • 2
  • 2
5 Comments
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 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 54

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Removing HTML elements using javascript 4 42
hosting images 4 27
Botom of page is wrong color 5 10
Location of Buttons 4 14
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

813 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now