Boa pergunta!

Cara no globo.com pelo menos na home pelo que vi independente do mouse na imagem ou no titulo, fica subilinhado o titulo e a imagem recebe uma borda.
Nesse caso vc tem um link abraçando a img e o titulo e no hover desse link vc faria tipo
a:hover img{border:1px solid cor}
a:hover .titulo{text-decoration: undereline;}


Agora se vc quer da um hover na imagem e deixar o texto diferente ou vice-versa, diria pra usar jQuery, ja que vc ta dando foco num objeto e quer manipular o irmão dele (se assim estiver o seu html) usando siblings();

Não sei se foi essa a sua pergunta, qualquer coisa posta ai.

Caro amigo!

Em seu codigo HTML adicione assim:


<a href="link-da-noticia.html" class="foto " title="titulo">
<img src="suaIMG.jpg" alt="foto" title="foto">
<h2>No ES, mulher é amarrada e tem casa assaltada</h2>
texto descritivo no no no no no no no no no no no no no no no no no no no no no no no no no no no no
</a>

Estruturalmente não é a forma mais correta, porem irar funcionar!! Ai vai sa dua criatividade fazer funcionar perfeito!

E no CSS vc define


.foto:hover img { border:1px solid cor;}
.foto:hover { text-decoration: undereline;}


Muito obrigado, @dusigner ;-)

Amg, um jeito de fazer isso sem ficar com a estrutura "errada" é fazer a mesma coisa que o dusigner disse, mas colocar o :hover no elemento pai.

Você deve definir esse elemento pai com position absolute.

Dentro dele coloque um link absolute com left e top 0, e width e height 100%, esse link deve abrir e fechar sem nada dentro.

Só a título de Web Standard: a descrição dada por "dusigner" não é semânticamente correta.

Um elemento de bloco "h2" não pode estar contido dentro de um elemento inline "a".
Substitua "h2" por "strong" ou "em" que você estará escrevendo a marcação adequada.

Outra solução seria marcar de forma diferente.

<div class="algumaClasse">
   <a href="..."><img src="..." alt=""></a>
   <h2><a href="...">Título</a></h2>
   <a class="desc" href="...">Descrição</a>
</div>

Lembre-se que se for uma "lista de notícias", a marcação correta dispensa o elemento "div" e passa a ser marcada dentro de um elemento "ul".

Para o CSS vale a herança dos elementos.

.algumaClasse a img {regras css} /* para colocar uma borda na imagem */
.algumaClasse h2 a {regras css} /* para sublinhar ou trocar a cor do título */
.algumaClasse .desc {regras css} /* para sublinhar o texto de descrição */

Valeu mesmo @LFeh e @Ednilson!!