JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<ul class="news_left">
														<li id="bx_3218110189_409433">
								<a href="/news/proisshestviya/v-kokhomskoy-zaprudke-nayden-trup-30-10-2014/" class="s-title">В кохомской Запрудке найден труп</a>
									<div class="p">Личность мужчины, причины смерти устанавливаются</div>
													<div class="tags"><a href="/tag/proisshestvie/" target="_blank">происшествие</a></div>
								<div class="rate-block">
					<span class="date">08 Июня 2014, 11:07</span>
															<span class="rate">+5</span>
				</div>
			</li>
														<li id="bx_3218110189_409428">
								<a href="/news/proisshestviya/za-20-minut-v-vodoemakh-ivanovskoy-oblasti-nashli-eshche-dva-trupa-30-10-2014/" class="s-title">За 20 минут в водоемах Ивановской области нашли еще два трупа</a>
									<div class="p">Женщина погибла в Шуйском районе, мужчина в парке им. Революции 1905 года</div>
													<div class="tags"><a href="/tag/proisshestvie/" target="_blank">происшествие</a></div>
								<div class="rate-block">
					<span class="date">08 Июня 2014, 19:22</span>
															<span class="rate">+6</span>
				</div>
			</li>
														<li id="bx_3218110189_409550">
                                                            <a class="img_link_news" href="/news/proisshestviya/v-parke-im-stepanova-v-reke-naydet-trup-30-10-2014/"><img src="http://test.chastnik.ru/upload/resize_cache/iblock/a9b/96_96_2/a9bd3ea0ac3cf919d9dd48c3be37864b.jpg"/></a>				<a href="/news/proisshestviya/v-parke-im-stepanova-v-reke-naydet-trup-30-10-2014/" class="s-title">В парке им. Степанова в реке найдет труп</a>
									<div class="p">Личность, обстоятельства гибели и причина смерти мужчины устанавливаются</div>
													<div class="tags"><a href="/tag/proisshestvie/" target="_blank">происшествие</a>,&nbsp;<a href="/tag/mchs/" target="_blank">МЧС</a></div>
								<div class="rate-block">
					<span class="date">01 Июня 2014, 14:29</span>
															<span...

CSS

body {
    min-width: 980px;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #333;
    cursor: default;
    background: #fff;
}

.news_left {
    width: 216px;
}

.news_left li {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid #c90031;
}

.news_left .rate-block .rate {
    float: right;
}

.news_left .rate-block {
    clear: both;
}

.news_left .img_link_news {
    margin: 3px 10px 3px 0;
    float: left;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
}

.news_left .img_link_news img {
    width: 100px;
    height: 100px;
    display: block
}

.news_left a {
    word-wrap: break-word;
    font-size: 12px;
}

.news_left .img_link_news:after {
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s;
}

.news_left li:hover .img_link_news:after {
	opacity:0;
}

.news_left .img_link_news:hover + .s-title,
.news_left .s-title:hover {
	color: #c90031;
}