Как сделать так, чтобы этот заголовок работал правильно? - PullRequest
Новая
       24

Как сделать так, чтобы этот заголовок работал правильно?

1 голос
/ 18 апреля 2019

В блоке фотосета у него был этот всплывающий текст с текстом «readmore», который появился, когда я завис над картинкой.Все, что я сделал, это заменил внутри блока readmore заголовок CMS

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

Веб-сайт compassionlens.photo предназначен для проверки полного кода, но элементы CMS не заполняются в инструментах разработки.Дайте мне знать, если вам нужно увидеть больше кода.Можете ли вы помочь мне выяснить, как сделать подпись при наведении курсора на фотографию? 

{block:Photo}
            <figure>
            {block:PermalinkPage} 
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="    
{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}"/>{LinkCloseTag}    
{/block:PermalinkPage} 
{block:IndexPage}{LinkOpenTag} <img src=" . 
{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}" 
height="{PhotoHeight-HighRes}"/>{LinkCloseTag}
{block:Caption}<figcaption><a href="{Permalink}">{Caption}</a> . 
 </figcaption>{/block:Caption}
                {/block:IndexPage}
                </figure>
            {block:PermalinkPage}
            <div class="post_photo_content_wrapper">
                {block:Caption}
                <div class="post_content">{Caption}</div>
                {/block:Caption}
                <div class="post_actions 
{block:Caption}with_caption{/block:Caption} clearfix">
            {/block:Photo}
  .post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

.post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption  {
opacity: .75;
}
 .post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

  .post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption  {
opacity: .75;
}

Ответы [ 2 ]

1 голос
/ 18 апреля 2019

Я думаю, я понимаю, что вы хотите сейчас. Я заставил это работать, используя CSS эффект наведения, как показано ниже 

.image {
  width: 400px;
}

.overlay {
  position: absolute;
  top: 30px;
  left: 40px;
  height: 100px;
  width: 100px;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.image:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
<div class="image">
<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="google">
<div class="overlay">
  <p class="text">This is a text</p>
</div>
</div>
0 голосов
/ 18 апреля 2019

Я думаю, что вы ищете подсказки. У w3schools есть хороший сайт о них. Вот как они выглядят 

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Вот сайт, если вы хотите узнать больше

https://www.w3schools.com/css/css_tooltip.asp

Edit:

Если вы хотите сделать это для изображения, посмотрите на этот другой пост

Подсказка на изображении

Здесь вы увидите, что вам нужно использовать атрибут «title», как показано ниже 

<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="alternative text" title="this will be displayed as a tooltip"/>
...