Changing children elements when hovering the parent - html

Question

I have my a container wich has a background image a title and button.
I want to hover on the container and change the title text-align to left, same as the button and display some information.
My question is if this is possible using only CSS3?
Here are the images of what I want to do:
(The name doesn't matter it's just an example)
Here's my HTML:
<article class="destination__item destination__item--jacksonhole">
<h2 class="destination__item--name">Jackson Hole</h2>
Ver más
</article>
My CSS:
.destination__item {
padding: 16em 0;
text-align: center;
}
.destination__item--canyons {
background: url(../images/destinos/dest1.jpg) no-repeat;
background-size: cover;
}
.destination__item--name {
color: white;
font-size: 36px;
font-weight: 700;
padding-bottom: .5em;
text-transform: uppercase;
}
.destination__item--btn {
background-color: $color__red--primary;
color: white;
font-weight: 400;
font-size: 14px;
padding: 1em 2.5em;
transition: all .5s ease;
text-transform: uppercase;
&:hover {
text-decoration: none;
background-color: $color__red--dark;
color: white;
}
}
To be honest, I have no idea where to start on the hover state, hope you guys can guide me a little bit.

Answer 1

Sure you can, just add the following to your CSS:
.destination__item:hover .destination__item--name,
.destination__item:hover .destination__item--btn {
display:block;
text-align:left;
}
here is a working example

Answer 2

You can change other div on hover of other example:
.destination__item--jacksonhole:hover + destination__item--name{
text-align: left;
}
To change Content check this Fiddle , text on link is changed.
html:
<article class="destination__item destination__item--jacksonhole">
<h2 class="destination__item--name">Jackson Hole</h2>
<span>Ver más<span>
</article>
CSS:
.destination__item {
padding: 16em 0;
text-align: center;
}
.destination__item--canyons {
background: url(../images/destinos/dest1.jpg) no-repeat;
background-size: cover;
}
.destination__item--name {
color:black;
font-size: 36px;
font-weight: 700;
padding-bottom: .5em;
text-transform: uppercase;
}
.destination__item--btn {
background-color: $color__red--primary;
color: black;
font-weight: 400;
font-size: 14px;
padding: 1em 2.5em;
transition: all .5s ease;
text-transform: uppercase;
&:hover {
text-decoration: none;
background-color: $color__red--dark;
color: white;
}
}
.destination__item:hover .destination__item--name,
.destination__item:hover .destination__item--btn {
display:block;
text-align:left;
}
.destination__item:hover .destination__item--btn span{
display:none;
}
.destination__item:hover .destination__item--btn:after{
content:"New Content"
}