Trying to put a div next to a slider

Trying to put a div next to a slider - javascript

I've been searching for a while for a responsive slider and I finally one. I changed the width so that it only takes up half the page because on the other half I would like to have an area of text.However the text goes underneath the slider and to the right instead of just directly to the right. I'm hoping that a second pair of eyes can help me catch the mistake I'm making.
.home-content {
background-color: #fff;
width: 90%;
padding-top: 3em;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 1px 1px #000;
-moz-box-shadow: 0px 1px 1px #000;
box-shadow: 0px 1px 1px #000;
}
#slides {
float: left;
}
#latest-posts {
float: right;
}
.rslides {
position: relative;
top: 1em;
list-style: none;
overflow: hidden;
width: 50%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
<div class="home-content">
<div id="slides">
<ul class="rslides">
<li><img src="../images/slider/test-slide-1.svg" alt=""></li>
<li><img src="../images/slider/test-slide-2.svg" alt=""></li>
</ul>
</div>
<div id="latest-posts">
<p>TEST TEXT</p>
</div>
</div>

Use display: inline-block instead of float: left and float: right along with percentage widths for #slides and #latest-posts.
.home-content {
background-color: #fff;
width: 90%;
padding-top: 3em;
margin-left: auto;
text-align: center;
margin-right: auto;
-webkit-box-shadow: 0px 1px 1px #000;
-moz-box-shadow: 0px 1px 1px #000;
box-shadow: 0px 1px 1px #000;
}
#slides {
display: inline-block;
vertical-align: middle;
width: 49%;
}
#latest-posts {
display: inline-block;
vertical-align: middle;
width: 49%;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
<div class="home-content">
<div id="slides">
<ul class="rslides">
<li><img src="http://placehold.it/350x150" alt=""></li>
<li><img src="http://placehold.it/500x150" alt=""></li>
</ul>
</div>
<div id="latest-posts">
<p>TEST TEXT</p>
</div>
</div>

Related

How to position text at the center of images?

I'm trying to make slideshow images i'm learning step by step for now i want to know how to position text at center of the images then making images overlay in one position.Please take a look at my code (i'm sorry for my english) thank you.
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider{
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
}
.slide-contain {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
I'm trying to make slideshow images i'm learning step by step for now i want to know how to position text at center of the images then making images overlay in one position.Please take a look at my code (i'm sorry for my english) thank you.

I had added some code to these two classes.
Now your caption will be in the centre
Happy Coding
.slide {
position:relative;
}
.slide-contain {
position:absolute;
bottom:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
background:#efefef;
}
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider{
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
position:relative;
}
.slide-contain {
text-align: center;
position:absolute;
bottom:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
background:#efefef;
}
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>

Your text is already over the background image. You just need to add background-position. Try this code.
body {
margin: 0;
}
li,
a {
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1,
#column2,
#column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider {
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
background-position: left top;
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
background-position: left top;
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
background-position: left top;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
position: relative;
}
.slide-contain {
text-align: center;
color: white;
position: relative;
height: 100%;
width: 100%;
}
.slide-contain span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Horizontally scroll hidden overflow-x with buttons and JS

I'm trying to use buttons on the right/left sides to scroll horizontally in a div that has multiple a tags, so I can't use the same button to scroll to a #hashtag. What I am trying to do is exactly just as Google Images Search header for different tags:
Link to example
.prsc {
overflow-x: hidden;
overflow-y: hidden;
display: block;
padding-top: 1px;
}
.prs {
/* the elements inside */
display: inline-block;
height: inherit;
left: 20px;
padding-bottom: 5px;
padding-right: 5px;
position: relative;
vertical-align: top;
white-space: nowrap;
float: right;
}
.Jyg {
height: 80px;
margin: -10px 2px 0;
overflow: hidden;
display: block;
}
.ichpcnt {
-webkit-overflow-scrolling: touch;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
padding: 10px 0 0;
white-space: nowrap;
width: 100%;
display: block;
}
.Iyg {
margin-right: 6px;
display: inline-block;
}
.prc {
/* the whole inner */
margin: -30px 0px 0;
padding: 10px 0px 10px 0;
position: relative;
overflow: hidden;
}
.OYi {
height: 90px;
display: block;
}
.allPlacesBtn {
font-family: cairo;
margin-top: -40px;
margin-bottom: 25px;
font-size: 45px;
display: grid;
}
.prp {
background: white;
bottom: 0;
opacity: 1;
position: absolute;
top: 11px;
width: 20px;
z-index: 10;
display: block;
}
<div class="custHdrBtns">
<div class="allPlacesBtn"></div>
<div class="OYi prc">
<div class="prsc prse">
<div class="prs">
<div class="Jyg">
<div class="ichpcnt" id="scrollArea">
<div class="Iyg">
<div class="vc_btn3-container headBtns vc_btn3-center">
link
link
link
link
link
link
link
link
link
link
link
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

the key is using white-space: nowrap;
$('#prev').on('click', function() {
$('#menu ul').animate({
scrollLeft: '-=100'
}, 300, 'swing');
});
$('#next').on('click', function() {
$('#menu ul').animate({
scrollLeft: '+=100'
}, 300, 'swing');
});
#menu {
position: relative;
}
ul {
width: 300px;
overflow: hidden;
white-space: nowrap;
display: block;
list-style: none;
padding: 0;
}
li {
width: 80px;
height: 50px;
display: inline-block;
text-align: center;
}
li:nth-child(odd) {
background-color: yellow;
}
li:nth-child(even) {
background-color: blue;
}
#nav {
position: absolute;
top: 0;
width: 300px;
}
#prev {
display: inline-block;
position: absolute;
left: 0;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
#next {
position: absolute;
right: 0;
display: inline-block;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item7</li>
</ul>
<div id="nav">
<div id="prev">Prev</div>
<div id="next">Next</div>
</div>
</div>

Why does this dropdown move another element?

I am creating a new navbar for my site, and using JS to open some simple hidden content divs.
I have the parent selectors where I want them, but when I click on one, it makes the other parent jump.
http://codepen.io/NaughtySquid/pen/xRYaWd
// dropdowns
function toggle_visibility(id){
event.preventDefault();
// close any open menus
// TODO
// open this menu
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
}else{
e.style.display = 'block';
}
}
.container {
margin: 0px auto;
width: 960px;
}
/* Navbar */
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 10001;
background-color: #222;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.caret-down {
display: inline-block;
width: 0px;
height: 0px;
vertical-align: middle;
border-top: 4px solid #999;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top-style: dotted;
content: "";
}
/* alerts menu */
.alerts-box {position: relative; float: right; right: 100px; color: #999; line-height: 29px;}
.alerts-box-new{background-color: #609FA9;}
.alerts-box-new:hover{background-color: #6FA8B1;}
.alerts-box-normal{background-color: #383838;}
.alerts-box-normal:hover{background-color: #4B4B4B;}
.alerts-box a {padding: 10px; height: 29px; display: block; color: #999;}
.alerts-box:hover{cursor: pointer;}
#alerts-content{
display: none;
position: relative;
float: right;
right: 65px;
top: 49px;
background: #222;
box-shadow: 1px 1px 1px black;
padding: 5px;
}
/* user menu */
.user-box {position: relative; float: right; right: 0px; color: #999; line-height: 29px;}
#user-box-content{
display: none;
position: relative;
float: right;
right: -50px;
top: 49px;
background: #222;
box-shadow: 1px 1px 1px black;
padding: 5px;
}
.nav-special-content ul {
list-style: none;
list-style-type: none;
padding: 0;
margin: 0;
color: #999;
}
.nav-special-content a {display: block; color: #999;}
.nav-special-content a:hover {color: #fff;}
<div class="navigation-main">
<div class="container group">
<div class="alerts-box right hide-small alerts-box-normal">
<img src="https://www.gamingonlinux.com/templates/default/images/comments/envelope-open.png" alt=""/>
</div>
<div id="alerts-content">
<div class="nav-special-content">
<ul>
<li>{:comment_count} new comments</li>
<li>{:message_count} new messages</li>
</ul>
</div>
</div>
<div class="user-box hide-small">
<img class="nav-avatar" src="https://www.gamingonlinux.com/uploads/avatars/gallery/1.png" alt="" width="49" height="49"> <span class="caret-down"></span>
</div>
<div id="user-box-content">
<div class="nav-special-content">
<ul>
<li>View Profile</li>
<li>User CP</li>
{:admin_link}
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>

Put #alerts-content in .alerts-box and add some CSS like this:
#alerts-content {
position: absolute;
float: none;
right: 0;
}

HTML/CSS Jquery hover not showing up

I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}

Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Just use display:none instead of visibility:hidden on class .nav-level-2

If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Trouble figuring out slider for post containers

There is a section on the site I'm working on that loads 4 containers that are links to posts. I need to add functionality that allows you to scroll through more containers in the section by clicking right or left arrows. Below is a screenshot of what it needs to be like (It looks exactly the same now, without the arrows and sliding functionality). I tried using http://flexslider.woothemes.com/ but had trouble using it. I followed the directions, but it didn't seem to work. If anyone could help me out or give me any advice it would be very appreciated!
What I am trying to do:
HTML:
<div class="opinion">
<div class="wrap">
<div class="atable">
<div class="acell">
<div class="contentbox">
<ul class="slides">
<li><img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /><span>Flower</span></li>
<li><img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /><span>Flower</span></li>
<li><img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /><span>Flower</span></li>
<li><img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /><span>Flower</span></li>
<li><img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /><span>Flower</span></li>
</ul>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
</div>
CSS:
.opinion {
background-color: #fff;
font-size: .8em;
padding-top: 25px;
padding-bottom: 25px;
}
.opinion:after {
clear: both;
content: "";
display: block;
}
.opinion .atable {
display: table;
border-collapse: separate;
border: 0px;
padding: 0px;
outline: none;
border-spacing: 1em;
width: 100%;
table-layout: fixed;
}
.opinion .atable .acell {
display: table-cell;
height: 100%;
width: 25%;
overflow: hidden;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #ccc;
background-color: #fff;
outline: none;
vertical-align: top;
}
.opinion .atable .acell:hover {
-webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
}
.opinion .atable .acell:last-child {
margin: 0px;
}
div.opinion .atable .acell .contentbox ul {
padding: 0;
min-width: 40px;
widows: 100%;
margin: 0;
}
div.opinion ul.slides li:hover:after {
display: block;
width: calc(100% - 20px);
height: calc(100% - 20px);
left: 9px;
top: 9px;
position: absolute;
border: 1px solid white;
content: ' ';
pointer-events: none;
}
div.opinion .atable .acell .contentbox ul li a span {
padding: 20px;
}
.opinion .atable .acell .contentbox ul.slides:hover a>span {
position: absolute;
bottom: 0px;
left: 0px;
padding: 20px;
color: #fff;
z-index: 10;
display: inline-block;
}
.opinion .atable .acell .contentbox {
position: relative;
}
.slideImg {
display: none;
}
.opinion .atable .acell .contentbox ul {
list-style-type: none;
}
.opinion .atable .acell .contentbox ul li a {
color: white;
display: block;
height: 200px;
max-width: 100%;
width: 100%;
background-size:cover;
background-position:center;
}
.opinion .atable .acell .contentbox ul li a span {
position: absolute;
bottom: 0px;
left: 0px;
padding: 10px 10px 20px 10px;
color: #fff;
z-index: 10;
display: inline-block;
font-size: 1.3em;
text-shadow: 1px 1px 1px #000;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
}
.opinion .atable .acell .contentbox ul li a:after {
content: "";
position: absolute;
top: 0;
left: 0;
box-shadow: inset 0 0 0 350px blue;
width: 100%;
height: auto;
}

Develop Reference

JavaScript is the programming language of the Web.

Trying to put a div next to a slider - javascript

Related

How to position text at the center of images?

Horizontally scroll hidden overflow-x with buttons and JS

Why does this dropdown move another element?

HTML/CSS Jquery hover not showing up

Trouble figuring out slider for post containers

Categories

Resources