Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
For some unknown reason I tried to make a gallery using Grid but the footer doesn't show up on this page, I tried on other pages footer works just to find where I'm mistaken?
my HTML and CSS codes:
*{
margin: 0;
align-items: center;
padding: 0 ;
margin-left: auto;
margin-right: auto;
}
/*/****************HEADER/****************/
header img.ab {
width: 35%;
display: block;
text-align: center;
margin-bottom: 25px;
}
header ul {
list-style-type: none;
overflow: hidden;
background-color: #FFA07A;
width: 100%;
text-align: center;
}
header ul li {
display: inline-block;
float: center;
}
header ul li a {
display: block;
color: white;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
li a:hover {
background-color: #1F1300;
}
.photographehead{
text-align: center;
padding-bottom: 100px;
}
hr {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
.grid-container {
display: grid;
grid-template-columns: 400px 400px 400px ;
grid-template-rows: 200px 200px 200px 200px ;
grid-gap: 2px;
justify-content: center;
z-index: -999;
}
div img.sadlife{
float: left;
width: 400px;
height: 200px;
object-fit: cover;
padding: 10px;
border-radius: 25px;
}
.grid-container > div {
text-align: center;
padding: 10px 0;
padding-bottom: 200px;
font-size: 30px;
}
.lightbox {
display: none;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.lightbox:target {
display: block;
}
.lightbox span {
display: block;
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
footer.graphfooter{
clear: both;
position: relative;
height: 300px;
margin-top: -10px;
background-color:#A2B29F ;
text-align: center;
line-height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Salah Eddine Laouina</title>
<link rel="stylesheet" type="text/css" href="stylephotographe.css">
</head>
<body>
<header>
<img class="ab"src="logo.png">
<nav>
<ul>
<li> ACCUEIL</li>
<li> OEUVRES</li>
<li> MAKING OF</li>
<li> PRESS AND MEDIA</li>
<li> PHOTOGRAPHIE</li>
<li> CONTACT</li>
</ul>
</nav>
</header>
<div class="photographehead">
<h2 style="margin-top: 10px;">BORN TO SHOOT THE WORLD AROUND ME</h2>
<h6>Artist photographe Marocain</h6>
<br>
<hr>
<p>"La photographie est un instant qui se reflechit pas, suspendue à une fraction de seconds qui laisse à réfléchir."</p>
<address class="author">-Rémy Donnadieu</address>
<br>
<h3> SALAH EDDINE LAOUINA ARTISTE PHOTOFRAPHE MAROCAIN </h3>
</div>
<div class="grid-container">
<div><a href="#p1">
<img class="sadlife" src="photographie/photo1.jpg">
</a>
<a href="#" class="lightbox" id="p1">
<span style="background-image: url('photographie/photo1.jpg')"></span>
</div>
<div><a href="#p2">
<img class="sadlife" src="photographie/photo2.jpg">
</a>
<a href="#" class="lightbox" id="p2">
<span style="background-image: url('photographie/photo2.jpg')"></span>
</div>
<div><a href="#p3">
<img class="sadlife" src="photographie/photo3.jpg">
</a>
<a href="#" class="lightbox" id="p3">
<span style="background-image: url('photographie/photo3.jpg')"></span>
</div>
<div><a href="#p4">
<img class="sadlife" src="photographie/photo4.jpg">
</a>
<a href="#" class="lightbox" id="p4">
<span style="background-image: url('photographie/photo4.jpg')"></span>
</div>
<div><a href="#p5">
<img class="sadlife" src="photographie/photo5.jpg">
</a>
<a href="#" class="lightbox" id="p5">
<span style="background-image: url('photographie/photo5.jpg')"></span>
</div>
<div><a href="#p6">
<img class="sadlife" src="photographie/photo6.jpg">
</a>
<a href="#" class="lightbox" id="p6">
<span style="background-image: url('photographie/photo6.jpg')"></span>
</div>
<div><a href="#p7">
<img class="sadlife" src="photographie/photo7.jpg">
</a>
<a href="#" class="lightbox" id="p7">
<span style="background-image: url('photographie/photo7.jpg')"></span>
</div>
<div><a href="#p8">
<img class="sadlife" src="photographie/photo8.jpg">
</a>
<a href="#" class="lightbox" id="p8">
<span style="background-image: url('photographie/photo8.jpg')"></span>
</div>
<div><a href="#p9">
<img class="sadlife" src="photographie/photo9.jpg">
</a>
<a href="#" class="lightbox" id="p9">
<span style="background-image: url('photographie/photo9.jpg')"></span>
</div>
<div><a href="#p10">
<img class="sadlife" src="photographie/photo10.jpg">
</a>
<a href="#" class="lightbox" id="p10">
<span style="background-image: url('photographie/photo10.jpg')"></span>
</div>
</div>
<footer class="graphfooter" >
<figure>
<img src="biographie/salaheddinelaouina-1.png" alt="S.LAOUINA" style="width:15%">
<figcaption><span>S.LAOUINA</span></figcaption>
<p>SALAH EDDINE LAOUINA ARTISTE PEINTRE ET PHOTOGRAPHE MAROCAIN</p>
<p>Copyright 2020 © LAOUINA</p>
</div>
</figure>
</footer>
</body>
</html>
The problem is in some of your anchors ("<a>") in your HTML.
Some of them are not closed, like , for example:
<div>
<a href="#p7">
<img class="sadlife" src="photographie/photo7.jpg">
</a>
<a href="#" class="lightbox" id="p7">
<span style="background-image: url('photographie/photo7.jpg')"></span>
</div>
Look that the second anchor (id="p7") was left open (without close tag ). Leave tags unclosed can mess with all your document structure.
That problem was repeated in some tags of your HTML. Use a good code editor like VSCode to avoid that kind of error.
The link below is of a codepen with your HTML fixed. You can use a file compare tool like winmarge to see what I've changed.
https://codepen.io/niconeves/pen/ExXdRBG
Related
I would like to know if someone could help me with a CSS topic.
I am creating a page model through CSS, but it turns out that there is a part that does not stay the same as the rest.
It appears as follows:
enter image description here
And it should look like this, like the footer in the following image.
Do you suggest any ideas? I leave here the code that I have used for CSS.
enter image description here
I attach the HTML and CSS code used.
I tried to move the height and width but can't find the solution.
<!--Inicio de pie de página-->
<div class="clearfix"></div>
<footer id="footer">
<div class="wrap">
<div id="menu_footer">
<h5>Menú</h5>
<ul>
<li>Inicio</li>
<li>Blog Personal</li>
<li>Currículum</li>
<li>Contacto</li>
</ul>
</div>
<div id="location">
<h5>¿Dónde estamos?</h5>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.4968410733713!2d-3.690925684351!3d40.41999606336424!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42289a4a865227%3A0x98278b3a144a86f1!2sPuerta%20de%20Alcal%C3%A1!5e0!3m2!1ses!2ses!4v1599489227264!5m2!1ses!2ses"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0">
</iframe>
<div id="info">
<h5> Desarrollado con</h5>
<p>
<img src="img/html5-badge-h-css3-graphics-multimedia-performance-semantics.png"
alt="Creado con HTML y CSS">
</p>
<h5>Optimizado para</h5>
<p id="browsers">
<a href="#">
<img src="img/firefox-icon.png" alt="Firefox" title="Firefox">
</a>
<a href="#">
<img src="img/chrome.png" alt="chrome" title="Chrome">
</a>
<a href="#">
<img src="img/Opera_256x256.png" alt="Opera" title="Opera">
</a>
<a href="#">
<img src="img/safari.png" alt="Safari" title="Safari">
</a>
<a href="#">
<img src="img/android.png" alt="Android" title="Android">
</a>
<a href="#">
<img src="img/ios.png" alt="Apple" title="Apple">
</a>
</p>
<h5>Autor</h5>
<p>©Cristina Martínez - acmartinez96.blogspot.com</p>
</div>
</div>
</div>
</footer>
<!--Fin de pie de página-->
</body>
</html>
/FOOTER/
#footer h5
display: block;
background: url(../img/pxgray.png), white;
height: 55px;
letter-spacing: 2px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
line-height: 55px;
color: black;
border-radius: 5px;
margin-bottom: 15px;
#footer ul
text-align: left;
margin: 20px;
font-size: 25px;
#footer ul li
margin-top: 10px;
padding: 5px;
border-bottom: 1px solid #cccccc;
#footer ul li a
display: block;
height: 40px;
#footer iframe
width: 100%;
height: 300px;
margin-top: 10px;
border-radius: 5px;
box-shadow: 0x 0px 5px grey;
border: 5px solid white;
}
#footer img
margin-bottom: 15px;
#footer #browsers img{
width: 45px;
Thanks!
Try to use flexbox it's very helpful.
the rendering you request can be done simply this way
<div class="flex">
<div class="ll">Menu</div>
<div class="ll">Map</div>
<div class="ll">Footer</div>
</div>
div.ll {
background: #fff;
margin: 20 auto;
width: 200px;
padding: 50px;
text-align: center;
}
div.flex {
display: flex;
}
You can test it by using sandbox
Instead of a footer, try creating a <div> or <section> and align that to the right.
I would like to align the image links to the center of the page. This is what I have tried so far:
HTML:
<section id="Contact">
<h1 class="other-section">Contact</h1>
<div class="contact-links">
<a id="profile-link" href="https://facebook.com/" target="_blank">
<img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
</a>
<a id="profile-link" href="https://github.com/jadenadams329" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
</a>
<a id="profile-link" href="https://instagram.com" target="_blank">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" />
</a>
</div>
</section>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
CSS:
#Contact {
margin:0 auto;
padding:3em 0 0 0;
min-height:100vh;
background-color: var(--contact-bg);
}
.other-section{
font-size: 30pt;
text-align:center;
color: #EDF5E1;
margin-bottom: 10px;
}
.contact-links{
text-align: center;
}
#profile-link img{
width: 50px;
}
I cannot for the life of me get them to stay in the center of the page evenly spaced under Contact.
Actually you can achieve that using inline-block.
:root{--contact-bg: white}
#Contact {
margin:0 auto;
padding:3em 0 0 0;
min-height:100vh;
background-color: var(--contact-bg);
}
.other-section{
font-size: 30pt;
text-align:center;
color: #EDF5E1;
margin-bottom: 10px;
}
.contact-links{
text-align: center;
}
.profile-link{
display: inline-block;/*just add this*/
}
.profile-link img{
width: 50px;
}
<section id="Contact">
<h1 class="other-section">Contact</h1>
<div class="contact-links">
<a class="profile-link" href="https://facebook.com/" target="_blank">
<img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
</a>
<a class="profile-link" href="https://github.com/jadenadams329" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
</a>
<a class="profile-link" href="https://instagram.com" target="_blank">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" />
</a>
</div>
</section>
I am trying to write my contact page, it's for a personal website that I write as part of a project for school. I am trying to display little logos of certain social media sites, and my profile name/mail address next to the images. I have set up an unordered vertical list, I have elements for each individual < li > tag and here comes the problem: Facebook, for example, works fine. The logo is there, and a link to my profile next to it, with the text perfectly aligned vertically right in the center. The problem comes with paragraphs. For my Yahoo Mail address, for example, I cannot provide a link to my profile, so I instead just write my address as simple text between < p >< /p > tags. This text will not align. I don't know what to do. I've been trying stuff out and looking for solutions all over the internet for hours and nothing works. I do admit my HTML and CSS experience is very limited, but please help me. I will attach both my HTML code and the CSS file and I hope someone will take the time to see how they render and maybe help me out. Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Pagina de contact">
<meta name="author" content="Matei Popa">
<link rel="stylesheet" type="text/css" href="css/contactstyle.css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
<img class="image" src="img/contact-pg/facebooklogo.jpg" alt="Logo
Facebook">
</a>
</div>
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
Matei Popa
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
<img class="image" src="img/contact-pg/instagramlogo.jpg" alt="Logo
Instagram">
</a>
</div>
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
matei.popa.332
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/twitterlogo.jpg" alt="Logo Twitter">
</a>
</div>
<a href="https://twitter.com/mateiutz2001" target="_blank">
#mateiutz2001
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo
Mail">
</div>
<div class="paragraph">
<p>alex.matei1808#yahoo.com</p>
</div>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/gmaillogo.jpg" alt="Logo Gmail">
</div>
<div class="paragraph">
<p>
mattx1829#gmail.com
</p>
</div>
</div>
</li>
</ul>
</div>
<!-- add Phone number, Yahoo Mail, Gmail, Whatsapp, Skype, Reddit, Quora -->
</body>
</html>
Css:
#font-face
{
font-family: Sansation;
src: url(../font/Sansation_Regular.ttf)
}
body
{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
}
div.container
{
padding-top: 50px;
padding-left: 40px;
margin: 60px;
align-content: flex-start;
}
ul
{
list-style-type: none;
}
li
{
flex-direction: row;
width: 100%;
display: flex;
float: left;
height: 50px;
}
div.navlink
{
display: flex;
flex-direction: row;
width: 100%;
float: left;
text-align: left;
font-family: Sansation;
font-size: 24px;
padding: 10px;
}
a:link
{
color: #FFFFFF;
text-decoration: none;
background-color: transparent;
}
a:hover
{
color: #D1DC19;
background-color: transparent;
text-decoration: underline;
}
a:visited
{
color: #E47507;
background-color: transparent;
text-decoration: none;
}
a:active
{
color: red;
background-color: white;
text-decoration: underline;
}
div.img
{
display: flex;
flex-direction: row;
float: left;
align-content: center;
overflow: hidden;
}
div.paragraph
{
display: table;
margin: 0 auto;
color: #FFFFF;
font-family: Sansation;
padding-left: 0px;
width: auto;
height: 100%;
float: left;
overflow: hidden;
align-content: center;
text-align: center;
}
p
{
height: 100%;
vertical-align: top;
align-content: center;
}
.image
{
vertical-align: middle;
padding-right: 15px;
width: 30px;
height: 30px;
}
How it looks like now
You can provide a link for your Yahoo email address using mailto:youremail#address.com.
See: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_mailto
Your snippet of code for that li would then be:
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo Mail"></a>
</div>
alex.matei1808#yahoo.com
</div>
</li>
I am trying to have sliding-middle-out:hover:after display a different background color depending on the link that is hovered over. I assume there's a way to attach an id# to the function and have it display the color depending on the id that I attached to the html, but I can't figure it out.
html {
position: relative;
min-height: 100%;
}
body {
background: #232526;
background: -webkit-linear-gradient(to right, #232526, #414345);
background: linear-gradient(to right, #232526, #414345);
margin: 0em;
}
a {
cursor: pointer;
cursor: hand;
}
#navbar {
position: fixed;
width: 100%;
top: : 0;
height: 40px;
background: #e4e6e5;
background-color: rgba(228, 230, 229, .8);
border-top: solid transparent 5px;
z-index: 250;
text-align: center;
}
#navbar a {
text-decoration: none;
padding: 0 2% 0 2%;
font-family: sans-serif;
font-size: 12px;
color: #666666;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
height: 135px;
background: #e4e6e5;
background-color: rgba(228, 230, 229, .8);
-webkit-transform: translateZ(0);
border-top: solid transparent 5px;
z-index: 250;
}
.inline {
display: inline-block;
margin: .5em;
}
.wrap {
display: table;
height: 100px;
width: 360px;
}
#wrap_left {
text-align: left;
}
#wrap_left a {
text-decoration: none;
padding: 0 2% 0 2%;
font-family: sans-serif;
font-size: 12px;
color: #888888;
}
#wrap_right {
text-align: right;
}
.linebreak {
padding-top: 3px;
}
#content {
padding: 50px 0 140px 100px;
}
#sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
#sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#sliding-middle-out:hover:after {
width: 100%;
background: grey;
}
.material-icons.md-14 {
font-size: 14px;
}
<div id="navbar">
<a id="sliding-middle-out" href="Home.html"><i class="material-icons md-14">home</i>Home</a>
<a id="sliding-middle-out" href="Warrior.html"><i class="material-icons md-14">delete_forever</i>Warrior</a>
<a id="sliding-middle-out" href="Druid.html"><i class="material-icons md-14">spa</i>Druid</a>
<a id="sliding-middle-out" href="Priest.html"><i class="material-icons md-14">wifi</i>Priest</a>
<a id="sliding-middle-out" href="Paladin.html"><i class="material-icons md-14">star_half</i>Paladin</a>
<a id="sliding-middle-out" href="Hunter.html"><i class="material-icons md-14">my_location</i>Hunter</a>
<a id="sliding-middle-out" href="Mage.html"><i class="material-icons md-14">whatshot</i>Mage</a>
<a id="sliding-middle-out" href="Shaman.html"><i class="material-icons md-14">nature_people</i>Shaman</a>
<a id="sliding-middle-out" href="Warlock.html"><i class="material-icons md-14">person_outline</i>Warlock</a>
<a id="sliding-middle-out" href="Rogue.html"><i class="material-icons md-14">visibility_off</i>Rogue</a>
<a id="sliding-middle-out" href="Minions.html"><i class="material-icons md-14">keyboard_arrow_up</i>Minions</a>
<a id="sliding-middle-out" href="Spells.html"><i class="material-icons md-14">keyboard_arrow_down</i>Spells</a>
</div>
<!-- navbar -->
<div id="content">
<a href="../Cards/1/Jade_Idol.html">
<img src="../Cards/1/Jade_Idol_S.png">
</a>
<a href="../Cards/1/Mark_of_the_Lotus.html">
<img src="../Cards/1/Mark_of_the_Lotus_S.png">
</a>
<a href="../Cards/3/Celestial_Dreamer.html">
<img src="../Cards/3/Celestial_Dreamer_S.png">
</a>
<a href="../Cards/3/Jade_Blossom.html">
<img src="../Cards/3/Jade_Blossom_S.png">
</a>
<a href="../Cards/3/Pilfered_Power.html">
<img src="../Cards/3/Pilfered_Power_S.png">
</a>
<a href="../Cards/4/Jade_Spirit.html">
<img src="../Cards/4/Jade_Spirit_S.png">
</a>
<a href="../Cards/5/Lotus_Agents.html">
<img src="../Cards/5/Lotus_Agents_S.png">
</a>
<a href="../Cards/5/Lunar_Visions.html">
<img src="../Cards/5/Lunar_Visions_S.png">
</a>
<a href="../Cards/5/Virmen_Sensei.html">
<img src="../Cards/5/Virmen_Sensei_S.png">
</a>
<a href="../Cards/6/Aya_Blackpaw.html">
<img src="../Cards/6/Aya_Blackpaw_S.png">
</a>
<a href="../Cards/6/Jade_Behemoth.html">
<img src="../Cards/6/Jade_Behemoth_S.png">
</a>
<a href="../Cards/10/Kun_the_Forgotten_King.html">
<img src="../Cards/10/Kun_the_Forgotten_King_S.png">
</a>
</div>
<!-- content -->
<center>
<div class="footer">
<div class="inline">
<div class="wrap">
<div id="wrap_right">
<font color="888888" size="4%">CARDSPOILER.COM</font>
<br>
<font color="9B764C" size="3%">Freedom to know</font>
<p></p>
<font size="2%" color="666666">We are here to bring you visual, leaked spoilers for all of the cards you love within a simple gallery setting.</font>
<br>
<font color="#333333">
CONTACT US
PRIVACY POLICY
</font>
</div>
<!-- inline -->
</div>
<!-- wrap -->
</div>
<!-- wrap_left -->
<div class="inline">
<div class="wrap">
<div id="wrap_left">
<td>Mean Streets of Gadgetzan
</td>
<br>
<td>One Night in Karazhan
</td>
<br>
<td>Whispers of the Old Gods
</td>
<br>
<td>The League of Explorers
</td>
<br>
<td>The Grand Tournament
</td>
<br>
<td>Blackrock Mountain
</td>
<br>
</div>
<!-- inline -->
</div>
<!-- wrap -->
</div>
<!-- wrap_left -->
</div>
<!-- footer -->
Like is was said in the comments, IDs must be unique.
You should change #sliding-middle-out to .sliding-middle-out and use it as a class and then add an id to each of those elements.
Something like:
html:
<a id="home" class="sliding-middle-out" href="Home.html"><i class="material-icons md-14">home</i>Home</a>
css:
#home.sliding-middle-out:hover:after {
background-color: blue;
}
I'm trying to change an image that is placed in a button on hover. So far, I have managed for the image itself to change when you hover over it but not for when the button itself is hovered. Here is the code.
<style>
.btn-large{
width: 300px;
height: 350px;
}
.movie{
width: 90px;
height: 90px;
position: relative;
margin-top: 25px;
}
#hardware:hover, #hardware:active{
background: #23c6c8;
color: white;
}
</style>
<a href="#" class="btn btn-large" id="hardware">
<figure>
<img class="movie" alt="ticket" src="http://i.imgur.com/u8wsfFL.png" onmouseover="this.src='http://i.imgur.com/BuK26gd.png'" onmouseout="this.src='http://i.imgur.com/u8wsfFL.png'" />
</figure>
<div class="details">
<h2>All Tickets</h2></br>
<p>View all tickets</p>
</div>
</a>
you need to move the event handlers to the anchor instead of the img and search for the img tag
Demo
<a href="#" class="btn btn-large" id="hardware"
onmouseover="this.getElementsByTagName('img')[0].src ='http://i.imgur.com/BuK26gd.png'"
onmouseout="this.getElementsByTagName('img')[0].src = 'http://i.imgur.com/u8wsfFL.png'">
<figure>
<img class="movie" alt="ticket" src="http://i.imgur.com/u8wsfFL.png" />
</figure>
<div class="details">
<h2>All Tickets</h2></br>
<p>View all tickets</p>
</div>
</a>
use something like this
<style>
.btn-large{
width: 300px;
height: 350px;
}
.image{
width: 90px;
height: 90px;
position: relative;
margin-top: 25px;
background:url("http://i.imgur.com/u8wsfFL.png");
}
.btn-large:hover .image{
background:url("http://i.imgur.com/BuK26gd.png");
}
.btn-large:hover .details{
background: #23c6c8;
color: red;
}
</style>
<div class="btn-large">
<div class="image">
</div>
<div class="details">
<h2>All Tickets</h2></br>
<p>View all tickets</p>
</div>
</div>
.btn-large {
width: 300px;
height: 350px;
}
.details {
background: url("http://i.imgur.com/u8wsfFL.png") no-repeat;
height: 90px;
}
.details:hover,
.details:active {
background: url("http://i.imgur.com/BuK26gd.png") no-repeat;
}
figure {
height: 90px;
}
<a href="#" class="btn btn-large" id="hardware">
<div class="details">
<figure>
</figure>
<h2>All Tickets</h2>
</br>
<p>View all tickets</p>
</div>
</a>
Quite simple - just add css for details and figure to your stylesheet and set a background image and a different one on hover. You can remove the alternating imgs from your html
Here is a fiddle