Hey there! I'm currently diving into the world of web development with responsive design, but I'm still a bit of a newbie. So please bear with me as I try to explain my issue in detail. If you need more information, just let me know!
My current challenge involves designing a page that features jQuery hover effects on images. While one might think the problem lies in the JavaScript, it's actually simpler yet extremely frustrating for me. I want my images to be centered on the page even though they are aligned to the left by default. These image boxes are contained within list items (li's) and I've attempted to wrap them in a div and center the div instead.
It's important to mention that responsiveness is key here, hence why simply adding margins or paddings won't suffice.
Below is the snippet of HTML code for the body of my webpage:
<body>
<div class="body">
<div> <img src="images/logo.png" class="image"></div>
<div class="imgs">
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<a href="http://dribbble.com/shots/501695-Cornwall-Map">
<img src="images/9.jpg" />
<div><span>Cornwall Map by Katharina Maria Zimmermann</span></div>
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir({
hoverDelay : 75
}); } );
});
</script>
</body>
And here is how I've styled the elements using CSS:
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
@keyframes colorChange {
0% {
background: #4BB4BF;
}
20% {
background: #306F7A;
}
...
100% {
background: #4BB4BF;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
.da-thumbs {
list-style: none;
width: 100%;
height: 100%;
position: relative;
margin: 20px auto;
padding: 0;
}
...
...
.image {
max-width: 100%;
max-height: 100%;
background-size: cover;
}
.imgs {margin: 0 auto;
align: center;
}
I would greatly appreciate any suggestions or thoughts on how I can successfully align these elements on the webpage. Thanks!
Fiddle Case: https://jsfiddle.net/eqyfm41r/3/