I am creating a web site and want to add a hover effect on my buttons by loading another image/button with slightly different color suit that I created in Photoshop.
When I apply the code nothing happens.
Here is my code:
CSS:
#main{
position: relative;
background-color:#ececec;
height:900px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#main .button2{
position: absolute;
left:0.5%;
top: 71.5%;
z-index:20;
width:170px;
height:40px;
}
#main .button2:hover{
background-image : url(images/buttBootsRollover.png);
}
HTML:
<div id="main">
<article>
<section>
<a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
<a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
<a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
</section>
</article>
Here is the picture which might give a better overview :
Eventually I want to add the same hover effect on all of the 9 buttons
The way you are doing this is a bit off. You're setting the background-image property on an element that contains an image which (presumably) takes up the whole space of your element. You're going to give yourself a headache trying to work with that, so rather than explain why you're getting the result you are, I'm just going to tell you not to do it that way and give you a solution:
Get rid of the img elements inside your div elements. Change the background-image property of your button2 class to the image that you want as the default. Leave your .button2:hover property as is.
This is what you are looking for. but I'm sure you haven't try in Google at-least. I recommend you to follow a simple CSS tutorial first.
#main{
background-color:#ececec;
height:500px;
width: 600px;
margin:0px auto;
}
.button{
z-index:1000;
width:170px;
height:40px;
display:block;
background-repeat:no-repeat;
}
#but_one{
background-image : url(images/but_one.png);
}
#but_two{
background-image : url(images/but_two.png);
}
#but_three{
background-image : url(images/but_three.png);
}
#but_one:hover{
background-image : url(images/but_one_h.png);
}
#but_two:hover{
background-image : url(images/but_two_h.png);
}
#but_three:hover{
background-image : url(images/but_three_h.png);
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css" />
<title>hi css</title>
</head>
<body>
<div id="main">
<a href="index.php" ><img id="but_one" class="button" /></a>
<a href="index.php" ><img id="but_two" class="button" /></a>
<a href="index.php" ><img id="but_three" class="button" /></a>
<div>
</body>
</html>
maybe to achieve what you want you need the help of jquery
<div class="box">
<a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
<div class="overlay">play me!</div>
</div>
<div class="box">
<a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
<div class="overlay">play me!</div>
</div>
<div class="box">
<a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
<div class="overlay">play me!</div>
</div>
jquery
$(function(){
$(".box").hover(function(){
$(this).find(".overlay").fadeIn();
}
,function(){
$(this).find(".overlay").fadeOut();
}
);
});
Working demo
Just have one background image and hide a bit of it.
For example - double up as demonstrated here http://jsfiddle.net/edheal/Qb7YG
Here is the code
CSS:
#wibble
{
background-image: url(http://well-spun.co.uk/portfolio/technologies/images/rollover.png);
background-position: left top;
background-repeat: no-repeat;
height: 14px;
width: 200px;
}
#wibble:hover
{
background-position: left -14px;
}
HTML:
<div id="wibble">
</div>
The image is 28px high - just show either the top or bottom half depending if it is hovering.
Related
Not sure what's wrong with this because currently it's not responding to the CSS. It just overlaps all the images and text on top of each other and the images are original size rather than the 50px by 50px as indicated in the CSS.
HTML:
<p> Connect with Steven on </p>
<div class=socialmedialinks>
<a href="https://www.facebook.com/Established.in.1995" class=links> <img src="FBProfilePic.jpg" alt="Facebook">
</a> Facebook
<a href="http://twitter.com/stevenperkinsii" class=links> <img src="TwitterProfilePic.jpg" alt="Twitter">
</a> Twitter
<a href="https://www.linkedin.com/in/steven-perkins-9319ba93?trk=hp-identity-name" class=links> <img src="LinkedInProfilePic.jpg" alt="LinkedIn">
</a> LinkedIn
<a href="http://www.stevensperkins.wordpress.com/" class=links> <img src="WordPressProfilePic.jpg" alt="WordPress">
</a> WordPress
</div>
CSS:
.socialmedialinks {text-align:justify; width:50px}
.links{
display: inline-block; width:50px; height:50px;
}
Steven do you have an example of the output you're looking for? You've got a wide variety of issues going on here that are creating issues with your output if I understand correctly what you're trying to do.
First and foremost, you don't have any styles constraining the size of the images, you need the following style definition:
.links img {
max-width:50px;
max-height:50px;
}
Regarding positioning of the text relative to the images, you've got structural issues preventing things from displaying the way you want them to. You also need to surround your class names with quotes really, though that's not a factor here. I've reworked your code slightly to make what I think you want, if there are specifics to what I've done that aren't what you're looking for let me know and I'll help you get where you want to be: https://jsfiddle.net/7k5nn1n7/
Is this what you are trying:
<p> Connect with Steven on </p>
<div class="socialmedialinks">
<div class="links"><img alt="Facebooki" src="FBProfilePic.jpg">Facebook</div>
<div class="links"><img alt="Twitter" src="TwitterProfilePic.jpg">Twitter</div>
<div class="links"><img alt="LinkedIn" src="LinkedInProfilePic.jpg">LinkedIn</div>
<div class="links"><img alt="WordPress" src="WordPressProfilePic.jpg">WordPress</div>
</div>
CSS:
.socialmedialinks {
width:100%;
}
.links{
float:left;
padding-left:2%;
}
.links img {
width:50px;
height:50px;
}
You can give each link a class name.
add title="" for the link instead of alt="".
remove the image tags.
you can use the CSS to add the image to the link.
here is the code for html:
here is the CSS:
.socialmedialinks a:link,
.socialmedialinks a:active
.socialmedialinks a:visited{
text-indent: -9999em;
width:50px;
height:50px;
margin-right: 3px;
float: left;
padding:0;
}
.facebook {background: url('FBProfilePic.jpg') no-repeat;}
.twitter{background: url('TwitterProfilePic.jpg') no-repeat;}
.linkedin{background: url('LinkedInProfilePic.jpg') no-repeat;}
.wordpress{background: url('WordPressProfilePic.jpg') no-repeat;}
Please if you have any question let me know. thanks
Try The Following code:
HTML
<p>Connect With Steven on </p>
<h4 class="social">
<img src="facebook.jpg" alt="Facebook">Facebook</h4>
<h4 class="social">
<img src="twitter.png" alt="Twitter">Twitter</h4>
<h4 class="social">
<img src="youtube.png" alt="Youtube">Youtube</h4>
<h4 class="social">
<img src="instagram.jpg" alt="Instagram">Instagram</h4>
CSS
img{
height: 50px;
width: 50px;
margin-right: 4px;
}
h4{
width: 150px;
float:left;
}
Here is the sample Fiddle: Fiddle
very new to HTML and CSS. Can't get my text to move under my images. I have 4 images and under them I want to be a paragraph of text. This is probably a dumb question so please excuse my ignorance. I cant get the text to move where I want(and the values in the CSS file, pixel wise, are wrong but I can't even get 3 of them to show up to try and adjust them as its under my navbar or the images?). The images show up, in the correct order and are formatted correctly.
Trying to get to look like this:
https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8
Thanks in advance
Here is my CSS/HTML files:
.img {
position: relative;
float: left;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
.text2 {
position:relative;
left:200px;
top:400px:
}
.text3 {
position:absolute;
left:300px;
top:400px:
}
.text4 {
position:absolute;
left:400px;
top:400px:
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="about.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Title</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Links</li>
<li>LinkedIn</li>
<li>Github</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xx.jpg" class="img-circle img">
<div id="text1">
<p>TEXT UNDER PIC 1</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 2</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 3</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 4</p>
</div >
</div>
</body>
</html>
http://codepen.io/lostdino/pen/LpKKra
I wasn't sure if you wanted to keep your HTML structure or if it was open to revision so I just worked within the constraints your provided. What I did was remove your floats and instead use display: inline-block which will stack elements horizontally rather than vertically within their container. You can see I've also used [id*="text"] which will allow the capture of any elements with an id that contains 'text'. I'd suggest also moving away from pixels and go for a more responsive unit such as percentages or rem. If you think there is value in me showing you how I would approach this problem I'm more than happy to throw a quick example together for you. I hope this helps.
.img {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
[id*="text"] {
width: 250px;
display: inline-block;
}
With respect to the other answers assuming there is an image and caption relationship between the text and the images then a possible improvement to the solution would be as follows:
http://codepen.io/lostdino/pen/PPrryZ
.gallery img {
position:relative;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.gallery {
padding-top: 100px;
padding-left: 10px;
position:relative;
}
.gallery > figure {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
}
The HTML of the gallery restructured like so:
<div class="gallery">
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
</figure>
</div>
The reason your text isn't aligning as you'd wish is because <p> and <div> are block level elements by default, which means they'll fill space and start on new lines. To remedy this, you could change the display property to be inline.
That said, you're approaching this wrong, you're not grouping your image and the caption together. Your structure should be more along these lines:
<div class="container">
<!-- Image One -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Two -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Three -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
You would then set your desired widths on the .image-container class, and your image and captions will follow suite.
Your paragraphs are not nested in the proper order to achieve this. Make sure you place the paragraph tags within the div tag that contains the images.
Also, use the inspect element tool when you refresh your browser. In Google Chrome, go to View, Developer, and select Developer tools. A new window will appear at the bottom of the browser. When you hover over the font-end interface, the page will highlight your html nesting-structure.
Hope this helps, let me know if you have any more questions!
I am trying to make a iphone overlay with a scrolling image inside to showcase mobile website designs, but the image isn't scrolling with the overlayed iphone on top is there something I am doing wrong and how do I fix it?
DEMO: http://jsfiddle.net/jonathanl5660/Lao36z20/
<div>
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px" style="position: absolute; ">
</div>
<div style="width:300px;height:700px;overflow:scroll;margin:30px; position: relitive;">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="98%" height="700px" alt="" style="margin-top:150px;margin-left:10px;" /><br />
<br />
</div>
You could structure your html like this:
<div class="iphone">
<div class="container">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" alt=""/>
</div>
</div>
And then with CSS adjust the look :
.iphone {
width:370px;
height:800px;
background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center;
background-size:100%;
}
.container {
position:relative;
top:152px;
width:293px;
margin:auto;
max-height:496px;
overflow:auto;
}
.container img {
width:100%;
}
Check this demo Fiddle
I've forked your example and twaked it a bit. By keeping inner content at constant width we can expand its container vertically and the effect is that like if we only moved scrollbar to the right. Please also note we can setup overflow behavior spearately for x and y axes.
Here's the JSFiddle link:
http://jsfiddle.net/74yh81s4/2/
and the code:
<div class="position: relative">
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px">
</div>
<div style="width:340px; height:472px; overflow-x:hidden; overflow-y:scroll; margin:30px; position: absolute; top: 142px; left: 17px">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="295px" alt="" />
</div>
Best regards
Hai I am new in html and css.I need some help.I have 4 images given below.
The main Background image
Link image1
Link image2
Link image13
And I need to look the all images finally like
Final Look
My html is like
<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="/media/19134/001.jpg"/>
<img src="/media/19133/Twetter.jpg"/>?
<img src="/media/19133/facebok.jpg"/>
<img src="/media/19133/insta.jpg"/>
</div>
</div>
Can any one help on css to position the social link images.
<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="http://i.stack.imgur.com/mxD7P.jpg"/>
<img src="http://i.stack.imgur.com/lBlEE.jpg"/>
<img src="http://i.stack.imgur.com/FbE0s.jpg"/>
</div>
</div>
In css:
.aside-block__content {
background: url("http://i.stack.imgur.com/msmci.jpg") no-repeat;
width: 310px;
height: 100px;
}
.aside-block__content a img{
float: right;
margin-top: 50px;
margin-right: 30px;
}
DEMO : http://jsbin.com/kexam/1/edit
You can put the "follow us" image as a background image and float the icons right with margin-top and right to position them as desired :
FIDDLE
HTML:
<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="http://i.stack.imgur.com/lBlEE.jpg"/>
<img src="http://i.stack.imgur.com/mxD7P.jpg"/>
<img src="http://i.stack.imgur.com/FbE0s.jpg"/>
</div>
</div>
CSS:
.aside-block__content {
width:314px;
height:115px;
background-image: url(http://i.stack.imgur.com/msmci.jpg);
}
.aside-block__content a{
float:right;
margin:50px 30px 0 0;
}
There are a couple of ways to do this.
You could do this by...
HTML:
<div id="wrapper"> <!-- wrapper with the background - image -->
<div id="social_media"> <!-- a container for the social media icons -->
<img class="icon" src="/media/19133/Twetter.jpg"/> <!-- Your Icons -->
<img class="icon" src="/media/19133/facebok.jpg"/>
<img class="icon" src="/media/19133/insta.jpg"/>
</div>
</div>
Css:
#wrapper { background: url(/media/19134/001.jpg) no-repeat; }
#social_media { /* Your positioning */ }
.icon { float:right; margin-left: 20px; }
I want to make my Logo in my header clickable and link to the homepage but i don't know exactly how to do this right.
My code:
Navigation menu:
HTML
<div id="myMenu">
<div class="myWrapper">
<nav>
<div class="logo"></div>
</nav>
</div>
</div>
CSS
#myMenu
{
width: 100%;
height: 30px;
z-index: 999;
background-color: #252e30;
}
.myWrapper
{
max-width: 660px;
margin: 0 auto;
}
.logo
{
display: inline-block;
width: 156px;
height: 30px;
margin-top: 5px;
background-size: auto 43px;
background-image: url(../images/mylogo.png);
background-repeat: no-repeat;
}
I want my logo make clickable and link to the page: Homepage.cshtml
Instead of using CSS to set your logo as a background image, what would be wrong with using the img tag, surrounding by a link? Like so:
<div id="myMenu">
<div class="myWrapper">
<nav>
<img src="../images/mylogo.png" height="30" width="156" />
</nav>
</div>
</div>
This has the added benefit of being more accessible (especially if you use an alt attribute on your logo), which makes search engine bots happier. Image content that conveys meaning to the user should never bet set using CSS.
You better use an image wrapped in an anchor-tag.
But else this should work:
<div class="logo" onclick="window.location.href='homepage.html'"></div>
You can't make a background image a link. Move the image into the HTML code, and then make that a link.
<div id="myMenu">
<div class="myWrapper">
<nav>
<div class="logo"></div>
</nav>
</div>
</div>
also it can be like following example:
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #000000;">
<div class="logo" >
<a href="{% url 'major' %}">
<img src="{% static 'images/logo.gif' %}" style="width:80px;height:80px;"/>
</a>
</div>
.....
</nav>
Use an <a> instead of the <div> for the logo..