Caption Style Changes - css

Question

Hi Stack Overflow Community,
Novice HTML user: I am currently using the Baguette gallery (v1.8.1) code for my gallery site.
Tutorial: http://yifangdi.blogspot.com/2017/05/baguetteboxjs-simple-and-easy-to-use.html
I want to change the font style of the "data-caption"
example code:
or implement a hover-over caption .css style rule.
CSS for gallery grid:
body {
background - image: linear - gradient(to top, #d3c081 % , #d3c081 75 % , #d3c081 100 % );
min - height: 100 vh;
font: normal 16 px sans - serif;
padding: 100 px 0;
}
.container.gallery - container {
background - color: #163049;
color: # 163049;
min - height: 100 vh;
border - radius: 20 px;
box - shadow: 0 8 px 15 px rgba(0, 0, 0, 0.06);
}
.gallery - container h1 {
text - align: center;
margin - top: 70 px;
font - family: 'Droid Sans', sans - serif;
font - weight: bold;
}
.gallery - container p.page - description {
text - align: center;
max - width: 800 px;
margin: 25 px auto;
color: #888;
font-size: 18px;
}
.tz-gallery {
padding: 40px;
}
.tz-gallery .lightbox img {
width: 100%;
margin-bottom: 30px;
transition: 0.2s ease-in-out;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.tz-gallery .lightbox img:hover {
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
.tz-gallery img {
border-radius: 4px;
}
.baguetteBox-button {
background-color: transparent !important;
}
#media(max-width: 768px) {
body {
padding: 100px 0;
}
.container.gallery-container {
border-radius: 0;
}
}
<div class="container gallery-container">
<div class="tz-gallery">
<div class="row">
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="images/park.jpg" data-caption="The Park">
<img src="images/park.jpg" alt="Park">
</a>
</div>
</div>
</div>
</div>

Answer 1

body {
background-image: linear-gradient(to top, #d3c081%, #d3c081 75%, #d3c081 100%);
min-height: 100vh;
font: normal 16px sans-serif;
padding: 100px 0;
}
.container.gallery-container {
background-color: #163049;
color: #163049;
min-height: 100vh;
border-radius: 20px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}
.gallery-container h1 {
text-align: center;
margin-top: 70px;
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
}
.gallery-container p.page-description {
text-align: center;
max-width: 800px;
margin: 25px auto;
color: #888;
font-size: 18px;
}
.tz-gallery {
padding: 40px;
}
.tz-gallery .lightbox img {
width: 100%;
margin-bottom: 30px;
transition: 0.2s ease-in-out;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.tz-gallery .lightbox img:hover {
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
.tz-gallery img {
border-radius: 4px;
}
.baguetteBox-button {
background-color: transparent !important;
}
#media(max-width: 768px) {
body {
padding: 100px 0;
}
.container.gallery-container {
border-radius: 0;
}
}
[data-caption="The Park"] {
font: italic 16px sans-serif;
font-size: 2em;
}
<div class="container gallery-container">
<div class="tz-gallery">
<div class="row">
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="images/park.jpg" data-caption="The Park">
<img src="images/park.jpg" alt="Park">
</a>
</div>
</div>
</div>
</div>
use [data-caption] like below
[data-caption="The Park"] {
font: italic 16px sans-serif;
font-size: 2em;
}