изображение наведите курсор на текст и внутри изображения

Question

изображение наведите курсор на текст и внутри изображения

0

.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0; left:0;
 -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}


.text:hover {
opacity:1;
}

Это css для моего наведения на изображение и восприятие текста.

http://jsfiddle.net/LbLHc/

вот что у меня есть. Как я помещаю текст внутри своего изображения, когда я наводил на себя курсор?

Спасибо

user3555167 06 май 2014, в 07:28

Источник

0

Я думаю, вы хотите, чтобы текст появлялся за изображением справа ??
Swarna Latha 06 май 2014, в 05:34

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Я думаю, вы хотите, чтобы текст появлялся за изображением справа ??

Anuradha · Answer 1 · 2014-05-06T05-57-00.000Z

Here is solution for you problem.
Html Code
<div class="row">
 <div class="relative imgContainer">
  <a href="works/nytimes/nytimes.html">
   <span class="text">NY times magazine: Table of Contents</span>
   <img src="http://placehold.it/500x200" class="img-responsive" />
  </a>
 </div>
 <div class="relative imgContainer">
  <span class="text">Eloquence Magazine</span>
  <img src="http://placehold.it/700x500"class="img-responsive" />
 </div>
</div>
**Css Code**
.imgContainer:hover .text{
    display:block;
    opacity:1;
}
.relative{
    position: relative;
}
.imgContainer{
   height: 250px;
   width: 400px;
   margin-bottom: 20px;
}
img{
   height: 250px;
   width: 400px;
}
.text {
   position: absolute;
   font-family: "courier new";
   font-size:30px;
   font-style: bold;
   color: blue;
   background-color:rgba(255,255,255,0.7);
   display:none;
   width: 100%;
   height:100%;
   text-align: center;  
   top:0; left:0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}


.text:hover {
    display:block;
    opacity:1;
}

FiddleLink http://jsfiddle.net/anu1718/Y2AYj/

Stefano Dalpiaz · Answer 2 · 2014-05-06T02-48-00.000Z

Если я правильно ее понимаю, вы хотите скрыть текст по умолчанию и показывать его только при наведении указателя мыши на изображение. Если вы хотите использовать только простой CSS для этого, у вас должен быть общий контейнер для изображения и текста (последний из которых абсолютно позиционирован и скрыт) и добавить правило CSS, ориентирующееся на состояние: hover контейнера, чтобы показать текст.

В вашем коде я добавил в контейнер класс (fadingtext):

<div class="row">
    <div class="col-xs-4"> <a href="works/nytimes/nytimes.html">
          <span class="text">Title</span>
          <img src="http://placehold.it/500x200" class="img-responsive"/>
      </a>

    </div>
    <div class="col-xs-4 fadingtext"> <span class="text">Text that fades on hover</span>

        <img src="http://placehold.it/700x500" class="img-responsive" />
    </div>
</div>

И вот ваш CSS с фиксированными селекторами:

.fadingtext .text {
    position: absolute;
    font-family:"courier new";
    font-size:30px;
    font-style: bold;
    color: blue;
    background-color:rgba(255, 255, 255, 0.7);
    width: 100%;
    line-height:50px;
    text-align: center;
    z-index:10;
    opacity: 0;
    display:block;
    height:100%;
    overflow: hidden;
    top:0;
    left:0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.fadingtext:hover .text {
    opacity:1;
}

Вот измененная версия вашего jsfiddle:

http://jsfiddle.net/Rws85/2/