как в css и html сделать так чтобы при наведении на текст он менялся

Чтобы именно содержание текста менялось - такое скорее через Javascript, а не через CSS.
На событие onmouseover нужно повесить innerHTML, в котором и прописывать нужный текст

Тут несколько вариантов:
1. Перекрывать один объект другим с помощью css и свойства :hover
2. переверстать через псевдоэлементы :after или :before. У них есть свойство "conent" - это как раз содержание псевдоэлемента. Соответственно в css прописываете для :after {content:"Первый текст"} а для :after:hover {content:"Второй текст"}

г* вопрос
https://jsfiddle.net/hjf23n8m/
можно и пофлексить, но это уже порно )1

заключить текст в блок или span
и с помощью обработчика событий менять text1 на text2
$('text1')onmouseover=function(){$(this). 'text2'}
библиотеку jQuery подключить надо

<style>
#a:hover {
content:"Blog my";
}
</style>

<span id="a">My blog</span>