css实现卡片悬浮显示详细文字介绍图文效果代码-html代码-BFW代码库

css实现卡片悬浮显示详细文字介绍图文效果代码

代码语言：html

所属分类：悬停

代码描述：css实现卡片悬浮显示详细文字介绍图文效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
    <style>
        body{
    	min-height: 100hv;
    	background: #050822;
    	line-height:20px;
    }
    *{
    	margin:0;
    	padding:0;
    	font-size: 12px;
    }
    ul{
    	list-style:none;
    }
    .hide{
        display: none;
    }
    .lf{
    	float: left;
    }
    .lr{
    	float: right;
    }
    .red, .red a,.red a h5, .red a p{
        color:#FF0000 !important;
    }
    a {
        text-decoration: none;
        color: inherit;
    }
    .mr2 {
    	margin-right: 1rem;
    }
    .ml2 {
    	margin-left: 1rem;
    }
    
    .main-group{
    	position: relative;
    	width:100vw;
    	align-items: center;
    	justify-content: center;
    	display: flex;
    	flex-wrap: wrap;
    	min-height: 100vh;
    }
    
    .main-group .item-group{
    	width:260px;
    	padding:10px 10px;
    	box-sizing: border-box;
    	position: relative;
    }
    .main-group .img-group{
    	position: relative;
    }
    .main-group .img-group img{
    	width:100%;
    	clip-path:circle(100% at 50% 150px);
    	transition: all .4s;
    }
    .main-group .img-group .page-one-title{
    	z-index: 1;
    	width:120px;
    	height: 120px;
    	display: flex;
    	background: rgba(255, 255, 255, 0.6);
    	justify-content: center;
    	align-items: center;
    	position: absolute;
    	border-radius: 50%;
    	left:calc(50% - 60px);
    	top:calc(50% - 60px);
    	color: #fff;
    	font-size: 18px;
    	font-weight: bold;
    	opacity: 1;
    	transition: 0.4s;
    }
    
    .item-group .content{
    	position: absolute;
    	z-index:1;
    	left:0;
    	top:140px;
    	color: #fff;
    	padding:0 40px;
    	box-sizing: border-box;
    	text-align: center;
    	opacity: 0;
    	transition: 0.4s;
    }
    .item-group .content .title{
    	font-size: 18px;
    	font-weight: bold;
    }
    .item-group .content .desc{
    	font-size:12px;
    	margin-top:26px;
    	line-height: 20px;
    }
    .item-group .content .button-group{
    	margin-top:20px;
    	display: inline-block;
    	padding:3px 16px;
    	background: #0c6bad;
    	border-radius: 4px;
    }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        class Action{
        constructor(parameter) {
            this.data = parameter;
            this._main_group = $('.main-group');
    
            this._add_html();
            this._add_event();
        }
        _add_html(){
            let html ='';
            for(let i=0; i<this.data.length; i++){
                let this_data = this.data[i];
                html += '<div class="item-group">';
                html +='    <div class="img-group">';
                html +='        <div class="page-one-title" style="background:'+this_data.title_bg+';">'+this_data.title+'</div>';
                html +=.........完整代码请登录后点击上方下载按钮下载查看