Develop Reference

Make entire div act as a link except one div which also has another link

I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.
The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.
How can i make it cover for the whole product card with one link and, only person name for the another link.
By inspecting the first and second product cards, you may execute the code and locate my current problem.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->

Please check the second card which I updated
It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the name tag with an tag with another link.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #ccc;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#card-2 {
cursor: pointer;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group"></div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
alt=""
/>
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<div
id="card-2"
class="item col-xs-4 col-md-3"
onclick="window.location='https://www.youtube.com'"
>
<div class="thumbnail">
<img
class="img-id"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
alt=""
/>
<div class="person">
<a href="https://www.linkedin.com/">
<p class="person-name">Person Name</p>
</a>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</div>
</div>
</div>

How can I set margins of overlay?

I am using a background image and an overlay in my div. But the overlay doesn't overlap properly. It is leaving some margins at both the sides for reasons. I tried setting margins so that it overlaps completely but then it disturbs my layout.
How can i correct it?
/*numscroller*/
.image{
height:auto;
width:100%;
background:#FFCC99;
}
.over2{
height:auto;
width:100%;
background-color:rgba(0,0,0, 0.7);
}
.num{
margin:auto;
padding:6rem 0rem;
float:left;
}
<script src="https://raw.githubusercontent.com/tinywall/numscroller/master/numscroller-1.0.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row " >
<div class="col-12 image">
<div class="over2">
<div class="row justify-content-around">
<div class=" num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<center>
<h3><b>Slums covered</b></h3>
<h3 class='numscroller' data-min='1' data-max='7' data-delay='1' data-increment='1'><b>7</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Lives changed</b></h3>
<h3 class='numscroller' data-min='1' data-max='400' data-delay='1' data-increment='3'><b>400</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Our supporters</b></h3>
<h3 class='numscroller' data-min='1' data-max='30' data-delay='1' data-increment='1'><b>30</b></h3>
</center>
</div><!--num col-10 ends-->
</div><!--row justify ends-->
</div><!--over ends-->
</div><!--col-12 ends-->
</div><!--row ends-->
</div>

you can position the image container relatively, and the overlay should be position absolutely.
.image {
position: relative;
height: 100px;
width: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,.3);
display: flex;
justify-content: center;
align-items: center;
}
<div class="image">
<span>I am the image </span>
<div class="overlay">
I am the overlay
</div>
</div>

how to open accordion if its inside filter by using anchor tag

I am stuck in some unusual situation. I want to redirect button to the specific page where there are multiple category filters of bike models and similar category models description is mentioned in another page with same kind of filter but the inside filter, there are multiple accordions according to models.
Whenever I am trying to redirect link to particular models and its accordion should open but it is redirecting to only first element. Here is code
I have tried with adding id after link but its not working because there is filter in between
// add attempt here
$(document).ready(function() {
$(".rm-box").hide();
});
$(document).ready(function(){
$(".button").click(function(){
var value = $(this).attr("data-filter");
if (value == "all")
{
$(".filters").hide('1000');
}
else
{
$(".filters").not("." + value).hide("1000");
$(".filters").filter("." + value).show("1000");
}
$("ul .button").click(function(){
$(this).addClass('active').siblings().removeClass('active');
})
})
})
$(document).ready(function() {
var hash = window.location.hash;
hash && $('ul.myfilter a[href="' + hash + '"]').panel-body('show');
});
/* add helpful css here */
ul.myfilter {
padding: 0;
position: relative;
width: 100%;
margin: 10px 10px 30px;
}
.myfilter>li {
list-style: none;
float: left;
padding: 10px 20px;
color: #ffffff;
margin-right: 15px;
font-family: 'Oswald';
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 24px;
}
.myfilter>li:hover, .active {
color: #ff6501!important;
font-size: 30px!important;
}
.filter-cont{
padding: 0 30px;
position: relative;
padding: 30px;
box-sizing: border-box;
background-color: #000000;
width: 100%;
margin: 0;
}
.iron-883{
height:400px;
width: 100%;
background-size: cover;
background-position: 50%;
}
.acco-title:hover {
text-decoration: none;
}
.acco-title {
font-family: 'Montserrat';
font-weight: 700;
color: #ff6501 !important;
font-size: 24px;
text-transform: uppercase;
}
.colorview{
position: relative;
background-color: #363636;
width: 40%;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="myfilter">
<li class="button active" data-filter="sportster">Sportster</li>
<li class="button" data-filter="street">Street</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
<div style="clear: both;"></div>
</ul>
<div class="box filters sportster">
<div class="row">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img iron-883">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>IRON 883</h4>
<a class="orng-btn filt-bike-link" href="hdmodels.html#collapse1">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img forty-8">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>FORTY EIGHT</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse2">Know More</a>
</div>
</div>
</div>
<div class="row hd-sportster">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img custom-1200">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>1200 CUSTOM</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img hd-roadster">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>ROADSTER</h4>
<a class="orng-btn filt-bike-link" href="hdmodels.html">Know More</a>
</div>
</div>
</div>
</div>
<ul class="myfilter">
<li class="button active" data-filter="street">Street</li>
<li class="button" data-filter="sportster">Sportster</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
<div style="clear: both;"></div>
</ul>
<div class="box filters street">
<div class="panel-group" id="streetaccordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Some Code
</div>
</div>
</div>
</div>
</div>

I am not going to try to figure out ALL your functionality but just address the question. Note where the element with id collapse2 is open when this is ran.
I used this reference: https://getbootstrap.com/docs/4.0/components/collapse/
I altered some CSS etc. just to show it better in this limited context more clearly. You were close but the key is the selector and then trigger the show event. These are the key lines: (comments in the code, note where they are placed)
let hash = window.location.hash;
$('#' + hash).collapse('show');
Side note, I moved these outside the UL since a UL can only contain li or a nested list item and added a class instead of in-line style:
<div class="clear-things"></div>
Reference https://www.w3.org/TR/html401/struct/lists.html#h-10.2
$(function() {
//$(".rm-box").hide();
$("ul.myfilter").find(".button").on('color-siblings', function(event) {
$(this).addClass('active').siblings().removeClass('active');
}).on('click', function(event) {
let filters = $(".filters");
let value = $(this).data("filter");
if (value == "all") {
filters.hide('1000');
} else {
filters.not("." + value).hide("1000");
filters.filter("." + value).show("1000");
}
$(this).trigger('color-siblings');
});
// code that toggles the collapse in the document ready event handler
// could also be a custom event trigger like I show for the color above
let hash = window.location.hash;
hash = "collapse2"; // just to test - get hash as above
// assumption of ID here thus the '#', ID MUST be unique so that is OK
$('#' + hash).collapse('show');
});
/* add helpful css here */
div>ul.myfilter {
background-color: #333333;
border: solid 1px lime;
}
/*so we see it */
ul.myfilter {
padding: 0;
position: relative;
width: 100%;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 30px;
}
.myfilter>li {
list-style: none;
float: left;
padding-top: 1em;
padding-right: 1.2em;
color: #0165ff;
margin-right: 0.25em;
font-family: 'Oswald';
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 1.2em;
}
.myfilter>li:hover,
.active {
color: #ff6501!important;
}
.filter-cont {
padding: 0 30px;
position: relative;
padding: 30px;
box-sizing: border-box;
background-color: #000000;
width: 100%;
margin: 0;
}
.iron-883 {
height: 10px;
width: 100%;
background-size: cover;
background-position: 50%;
}
.acco-title:hover {
text-decoration: none;
}
.acco-title {
font-family: 'Montserrat';
font-weight: 700;
color: #ff6501 !important;
font-size: 24px;
text-transform: uppercase;
}
.colorview {
position: relative;
background-color: #363636;
width: 40%;
height: 500px;
}
.clear-things {
clear: both;
}
.panel-body {border:solid blue 1px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<ul class="myfilter">
<li class="button active" data-filter="sportster">Sportster</li>
<li class="button" data-filter="street">Street</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
</ul>
<div class="clear-things"></div>
<div class="box filters sportster">
<div class="row">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img iron-883">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>IRON 883</h4>
<a class="orng-btn filt-bike-link" href="#collapse1">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img forty-8">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>FORTY EIGHT</h4>
<a class="white-btn filt-bike-link" href="#collapse2">Know More</a>
</div>
</div>
</div>
<div class="row hd-sportster">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img custom-1200">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>1200 CUSTOM</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img hd-roadster">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>ROADSTER</h4>
<a class="orng-btn filt-bike-link" href="#collapse3">Know More</a>
</div>
</div>
</div>
</div>
<ul class="myfilter">
<li class="button active" data-filter="street">Street</li>
<li class="button" data-filter="sportster">Sportster</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
</ul>
<div class="clear-things"></div>
<div class="box filters street">
<div class="panel-group" id="streetaccordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Some Code 750 CC
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse2" class="acco-title">Harley-Davidson Forty Eight</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
Some Code Forty Eight Cheese bits
</div>
</div>
</div>
</div>
</div>
</div>

Changing image on hover the text

There are 4 texts. When I hover on each of them I can see a certain picture which belongs to certain text.
The question is that, I need a slider consist of images. I mean when I hover on text1 I need to see my image and after one second this image has to disappear.
So, I need to do it with all texts, but in my code I just can see one image, apart from it is not a slider. Can you help me in this question?
This is the code:
.pic {
background-image: url(img/scr-img/1.png);
width: 236px;
height: 420px;
transition: 1s;
background-size: cover;
}
p1:hover~.pic {
background-image: url(img/scr-img/8.png);
}
p2:hover~.pic {
background-image: url(img/scr-img/9.png);
}
p3:hover~.pic {
background-image: url(img/scr-img/11.png);
}
p4:hover~.pic {
background-image: url(img/scr-img/5.png);
}
<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text1</p>
</div>
</div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text2</p><br><br><br>
</div>
</div>
</p2>
<div class="pic" style="border-radius: 20px;"></div>
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text3</p>
</div>
</div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text4</p>
</div>
</div>
</p4>

This would not be like a slider but inside of pic div we can change images when Texts are hovered.
I assume that we have all the required images in folder img/src-img and img folder is in the same directory where the html page exists.
Below code is working fine in Chrome
.pic {
background-image: url(img/scr-img/1.png);
width: 236px;
height: 420px;
transition: 1s;
background-size: cover;
}
p1:hover~.pic {
background-image: url(img/scr-img/8.png);
}
p2:hover~.pic {
background-image: url(img/scr-img/9.png);
}
p3:hover~.pic {
background-image: url(img/scr-img/11.png);
}
p4:hover~.pic {
background-image: url(img/scr-img/5.png);
}
<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text1</p>
</div>
</div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text2</p><br><br><br>
</div>
</div>
</p2>
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text3</p>
</div>
</div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text4</p>
</div>
</div>
</p4>
<div class="pic" style="border-radius: 20px;"></div>

Auto-scroll to a div when clicking on another div

When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example:
This is before I click on a div in the left div ("smallitems").
I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).
Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.
see jfiddle http://jsfiddle.net/h7bLK/

This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
Fiddle link
BONUS: You'll be able to link externally to the correct item.
CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.

According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col last-child">3</div>
<div class="col">4</div>
<div class="col">5 </div>
<div class="col last-child">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}

$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50.

<div class="container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});