CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jacob Doty
Jacob Doty

Reputation: 1

Image behind text on hover CSS HTML

I am trying to get an image to show up behind the text as a hover effect.

It is just a simple splash page for now, but I can't seem to figure out how to get this to work.

Here is the current page. The words below the logo are links. https://gyazo.com/8fac5b310ed8febd80032cc19b57d76e

Here is the image I want behind the text when a user hovers. https://gyazo.com/67852dd57789458942952b1dd3b3cb55

It is like a scribble effect in different colors. They wouldn't all show up at one, but just the different one behind each word as you hover.

Here is the html:

<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Lira.net</title>
<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
</head>
<body>
<div id="middlegroup">
<div id="topimage">
<img src="images/LiraLogo325.png">
</div>
<div id="links">
     <p>
        <a href="#">Liquidation</a> -
        <a href="#">Monetization<a> -
        <a href="#">Brokerage</a>
     </p>

</div>
</div>
</body>
<footer>
<p>&copy; 2016 Lira.net </p>
</footer>
</html>

and here is the CSS: 

h1 {
font-family: "Open Sans" , serif; 
color: #FFFFFF;
text-shadow: 2px 2px 3px #4d4d4d;
font-size: 5vw;
text-align: center;
}

body {
margin: 0;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

#topimage{
width: 100%;

text-align:center;
size: 1vw;
}
#links{
width: 100%;
list-style-type:circle;
}
#middlegroup{
width:600px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-125px 0 0 -300px;
}
a:link{
color:#01197d;
text-decoration: none;
}
a:visited{
color:#01197d;
text-decoration: none;
}
a:hover{
text-decoration: none;

}
a:active{
color:#01197d;
text-decoration: none;
}
p {
font-family: "Open Sans" , serif;
font-weight: 600;
font-size:15px;
text-align:center;
}
ul {
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:20px;
text-align:center;
list-style-type:circle;
}
footer p{
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:14px;
position:absolute;
bottom:0;
width:100%;
height:60px;   /* Height of the footer */

}

Any help would be greatly appreciated!

Upvotes: 0

Views: 1835

Answers (3)

xkurohatox
xkurohatox

Reputation: 198

Is this what you are talking about?

http://codepen.io/xkurohatox/pen/qbPXOb

HTML changes:

 <div id="links">
 <p>
    <a id="a1" href="#">Liquidation</a> -
    <a id="a2" href="#">Monetization<a> -
    <a id="a3" href="#">Brokerage</a>
    </p>

 </div>

CSS changes: 

#a1:hover {
background-image:url("http://previews.123rf.com/images/pzaxe/pzaxe1104/pzaxe110400016/9242659-Seamless-monochrome-square-texture-scribble--Stock-Vector-pattern- scribble-background.jpg");
 background-size:100%;
}
#a2:hover {
background-image:url("http://st.depositphotos.com/1466799/1121/v/950/dep_11211843-Full-color-abstract-scribble-background.jpg");
 background-size:100%;
}
 #a3:hover {
  background-image:url("http://thumbs.dreamstime.com/z/child-scribble-12020973.jpg");
 background-size:100%;
}
/* images above are not my own and only being used for demo purposes */

Hope this helps!

Upvotes: 0

ntgCleaner
ntgCleaner

Reputation: 5985

You'll just have to add a background image on hover. Here's a fiddle : https://jsfiddle.net/rd7zbytc/

and here's the code:

#links p a:hover {
    background-image:url("https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
    background-size:100px;
}

Upvotes: 1

Damian Cardozo
Damian Cardozo

Reputation: 122

The easiest way to get this done is to use background images You can try something like this:

.class1:hover {
background-image: url("paper.gif");
}
.class2:hover {
background-image: url("paper.gif");
}
.class3:hover {
background-image: url("paper.gif");
}

Just replace the class names for the ones that suits your links, and obviously play with sizing, something like display inline-block to the links will be enough. Here you have everything you will need for this task

Upvotes: 1

Related Questions