Question

我有2张图片：

我希望当光标位于图像上方时，它会出现在图像上，就像我附加的图像一样：

实现它的最佳方法是什么？可以实现：之前？

SMTP_SERVER = "smtp.office365.com"
SMTP_PORT = 587
SMTP_USERNAME = username
SMTP_PASSWORD = password
EMAIL_TO = email_to
EMAIL_FROM = email_from

#here we loop through our data-set and pull out rows to make different traces
for deal in winGraph['DEAL_IDENTIFIER'].unique():
    matched_rows = winGraph.loc[winGraph['DEAL_IDENTIFIER'] == deal]
    date = matched_rows.DATE.tolist()
    winRate = matched_rows.WIN_RATE.tolist()
    traces.append(
                 go.Scatter(
                            x = date,
                            y = winRate,
                            name = str(deal)
                             )
                  )
plotly.tools.set_credentials_file(username = 'username', api_key = 'api_key')                        
fig = dict(data = traces)

imageURL = py.plot(fig,auto_open = False, filename = 'test' )

msg = MIMEMultipart('related')
msg['Subject'] = Header(u"Hello", 'utf-8')
msg['From'] = EMAIL_FROM
msg['To'] = EMAIL_TO
msg_alternative = MIMEMultipart('alternative')
msg.attach(msg_alternative)

msg_text =  MIMEText(u'[image: {title}]'.format(**img), 'plain', 'utf-8')
msg_alternative.attach(msg_text)
html = u"""\
<html>
<head></head>
<body style="background-color:#DDDDDD; font-family: calibri;">
<p>
<img src="cid:{cid}" alt="{alt}"><br>
   Hi!<br>
   How are you?<br>
   Below is a summary of your performance
   <br>
   Top 5 Deals:
   {df}

   Please review:<br>
   The following graph represents your deals win rate over the past two weeks:
   <br>
   Look at attached spreadsheet for more info. <br>
   <img src="data:image/png;base64,{image}">
   </a>
   <br>
</p>
</body>
</html>
"""

response = requests.get(imageURL + '.png') # request Plotly for the image
response.raise_for_status()
image_bytes = response.content
image = base64.b64encode(image_bytes)

html = html.format( df = topAdv.to_html(index = False, escape = False),image = image,alt=cgi.escape(img['title'], quote=True),**img)
part2 = MIMEText(html, 'html', 'utf-8')

msg_alternative.attach(part2)

with open(img['path'], 'rb') as file:
    msg_image = MIMEImage(file.read(), name=os.path.basename(img['path']))
    msg.attach(msg_image)
msg_image.add_header('Content-ID', '<{}>'.format(img['cid']))

mail = smtplib.SMTP(SMTP_SERVER, SMTP_PORT)
mail.ehlo()
mail.starttls()
mail.login(SMTP_USERNAME, SMTP_PASSWORD)
mail.sendmail(EMAIL_FROM, EMAIL_TO, msg.as_string())
mail.quit()

Answer 1

    <div class="yourclass">

    <p>Your text</p>

    <img src="yourimage" alt="">
   </div>


    .yourclass{
    width: 250px;
    height: 250px;
    position: relative;
    overflow: hidden;
    }
    .yourclass:hover p{
    display: block;
}
    img{
    width: 100%;
    height: auto;
    position: absolute; 
    }
    p{
    display: none;
}

Answer 2

<style>
.overlay {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
height: 100%;
width: 100%;
opacity: 0;
background-color: black;
}
.div.image1:hover .overlay {
opacity: 0.8;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="overlay">
<div class="text">hey</div>

在图像上添加悬停效果（更好的做法）CSS

2 个答案: