Hover over effect only to apply to specific div

Question

I am trying to achieve the following. When you hover-over the div product-title, the background color changes and also the text color, all good. But somehow the font-color in the above divs also changes for CATEGORY and BRAND (in the corners of the image). And that I do not want. The rest is good as I want it to be. Just that part (brand and category font-text-color) has to stay as-is (= grey, and not become white) when you hover-over the product-title. How to accomplish that (hover-over product-title and only product-title div changes (font-color and background-color, and keep everything else as-is now as it is all good).

.image-video-linkmas {
    position: relative;
    display: inline-block;
}

.well.sb {
    background-color: #FFF;
    text-align: left;
    padding: 0;
    border: none;
    border-bottom: 1px solid #e3e3e3;
    text-decoration: none;
    -moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}

.product-detailsmas .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 0;
    background: #000;
    color: #fff;
    /* vertical-align: middle; */
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

.image-video-linkmas:hover .overlay {
    opacity: 1;
}

.well.sb .product-titlesidebar {
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin: 5px;
}

.well.sb .product-titlesidebar {  
	font-size: 13px;
	font-family: 'Montserrat', sans-serif;
	color: #444;
	font-weight: 700;
	line-height: 1.25em;
	margin:5px
}

.well.sb .product-titlesidebar:hover {
	color:#FFF;
	text-decoration:none;
	-moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}

.brandmas {
    font-size: 10px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-style: bold;
    text-align: center;
    color: #777;
    margin-left: 15px;
    outline: 1px solid #fff;
    padding: 2px 20px 2px 8px;
    background-color: #fff;
    opacity: 0.9;
    position: absolute;
    opacity: 0.7;
    top: 0;
    right: 0;
    /* min-height: 0; */
}

.categorymas {
    font-size: 10px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-style: bold;
    text-align: center;
    color: #777;
    margin-left: 15px;
    /* outline: 1px solid #fff; */
    padding: 2px 20px 2px 8px;
    background-color: yellow;
    position: absolute;
    opacity: 0.7;
    bottom: 0;
    right: 0;
    /* min-height: 0; */
}

.well.sb:hover div {
    color: #FFF;
    text-decoration: none;
    -moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}
.well.sb .product-titlesidebar {
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin: 5px;
}

<div class="well sb">
<a href="#" target="_blank">
    <div class="product-detailsmas">
        <div class="image-video-linkmas">
            <img alt="#" src="http://lorempixel.com/150/150">
            <div class="brandmas">
                BRAND
            </div>
            <div class="categorymas">
                CATEGORY
            </div>
            <div class="overlay">
                <div class="subcategorycar">
                    CAT CAR
                </div>
                <div class="idcar">
                    ID CAR
                </div>
                <div class="tagscar">
                    TAGS CAR
                </div>
                <div class="part-numbercar">
                    P/N CAR
                </div>
            </div>
        </div>
        <div class="product-titlesidebar">
            PRODUCT TITLE HEADER
        </div>
    </div></a>
  </div>

Answer 1

You can exclude certain elements with the :not() pseudo class.
.well.sb:hover div:not(.brandmas):not(.categorymas) {}

.image-video-linkmas {
    position: relative;
    display: inline-block;
}

.well.sb {
    background-color: #FFF;
    text-align: left;
    padding: 0;
    border: none;
    border-bottom: 1px solid #e3e3e3;
    text-decoration: none;
    -moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}

.product-detailsmas .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 0;
    background: #000;
    color: #fff;
    /* vertical-align: middle; */
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

.image-video-linkmas:hover .overlay {
    opacity: 1;
}

.well.sb .product-titlesidebar {
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin: 5px;
}

.well.sb .product-titlesidebar {  
	font-size: 13px;
	font-family: 'Montserrat', sans-serif;
	color: #444;
	font-weight: 700;
	line-height: 1.25em;
	margin:5px
}

.well.sb .product-titlesidebar:hover {
	color:#FFF;
	text-decoration:none;
	-moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}

.brandmas {
    font-size: 10px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-style: bold;
    text-align: center;
    color: #777;
    margin-left: 15px;
    outline: 1px solid #fff;
    padding: 2px 20px 2px 8px;
    background-color: #fff;
    opacity: 0.9;
    position: absolute;
    opacity: 0.7;
    top: 0;
    right: 0;
    /* min-height: 0; */
}

.categorymas {
    font-size: 10px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-style: bold;
    text-align: center;
    color: #777;
    margin-left: 15px;
    /* outline: 1px solid #fff; */
    padding: 2px 20px 2px 8px;
    background-color: yellow;
    position: absolute;
    opacity: 0.7;
    bottom: 0;
    right: 0;
    /* min-height: 0; */
}

.well.sb:hover div:not(.brandmas):not(.categorymas) {
    color: #FFF;
    text-decoration: none;
    -moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}
.well.sb .product-titlesidebar {
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin: 5px;
}

<div class="well sb">
<a href="#" target="_blank">
    <div class="product-detailsmas">
        <div class="image-video-linkmas">
            <img alt="#" src="http://lorempixel.com/150/150">
            <div class="brandmas">
                BRAND
            </div>
            <div class="categorymas">
                CATEGORY
            </div>
            <div class="overlay">
                <div class="subcategorycar">
                    CAT CAR
                </div>
                <div class="idcar">
                    ID CAR
                </div>
                <div class="tagscar">
                    TAGS CAR
                </div>
                <div class="part-numbercar">
                    P/N CAR
                </div>
            </div>
        </div>
        <div class="product-titlesidebar">
            PRODUCT TITLE HEADER
        </div>
    </div></a>
  </div>