HTML: 画像とテキストを並べる

SAMPLE

ホバリング時、色変化

REFERENCE

サムネイル画像の横にテキストを並べたレイアウト

HTML

<div class="menu">
    <li>
        <a href="https://qiita.com/kinoshita_yuri" target="_brank">
            <img src="images/lily.png" alt="" width="100" height="100">
            <p class="title">TITLE</p>
            <p class="desc">DESCRIPTION</p>
        </a>
    </li>
    <li>
        <a href="https://qiita.com/kinoshita_yuri" target="_brank">
            <img src="images/lily.png" alt="" width="100" height="100">
            <p class="title">TITLE</p>
            <p class="desc">DESCRIPTION</p>
        </a>
    </li>
</div>

CSS

.menu
{
    width: 400px;
    font-family: verdana, Segoe UI;
    margin: 0 auto;
    border-radius: 4px;
}
.menu ul
{
    padding: 10px;
    float: left;
    margin: 0px;
}

.menu li{
    list-style-type: none;
}

.menu li a{
    display: block;
    padding: 10px;
    color: #000;
    text-decoration: none;
    outline: 1px #285385 solid;
}

.menu li a:hover{
    background-color: #96c7ff;
}

.menu img{
    float: left;
}

.menu p{
    margin: 0 0 0 165px;
}

.menu .title{
    font-weight: bold;
    color: #285385;
}

.p desc{
    color: #000000;
    font-size: 40px;
}

.p key{
    color: #000000;
    font-size: 40px;
}

.p est{
    color: #000000;
    font-size: 40px;
}

.menu li a:after{
    content: "";
    display: block;
    clear: both;
}

.menu ul li        {
    display: inline-block;
    float: left;
    position: relative;
    cursor: pointer;
}
.menu ul li a        {
    cursor:pointer;
    display: block;
    padding: 10px;
    float: left;
    color: #fff;
    text-decoration: none;
}
.menu ul li ul
{
    display: none;
    margin-top: 10px;
}
.menu ul li:hover ul
{
    display: block;
    width: 200px;
    position: absolute;
    left: 0px;
    top: 25px;
    border-top: none;
    color: #fff;
}
.menu ul li:hover ul li
{
    padding: 5px;
    float: none;
    display: block;
}
.menu ul li:hover ul li a
{
    padding: 5px;
}